Quantcast
Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
    1. Welcome to GTAForums!

    1. GTANet.com

    1. GTA Online

      1. The Cayo Perico Heist
      2. Find Lobbies & Players
      3. Guides & Strategies
      4. Vehicles
      5. Content Creator
      6. Help & Support
    2. Red Dead Online

      1. Frontier Pursuits
      2. Find Lobbies & Outlaws
      3. Help & Support
    3. Crews

    1. Red Dead Redemption 2

      1. PC
      2. Help & Support
    2. Red Dead Redemption

    1. Grand Theft Auto Series

    2. GTA VI

      1. St. Andrews Cathedral
    3. GTA V

      1. Guides & Strategies
      2. Help & Support
    4. GTA IV

      1. The Lost and Damned
      2. The Ballad of Gay Tony
      3. Guides & Strategies
      4. Help & Support
    5. GTA San Andreas

      1. Guides & Strategies
      2. Help & Support
    6. GTA Vice City

      1. Guides & Strategies
      2. Help & Support
    7. GTA III

      1. Guides & Strategies
      2. Help & Support
    8. Portable Games

      1. GTA Chinatown Wars
      2. GTA Vice City Stories
      3. GTA Liberty City Stories
    9. Top-Down Games

      1. GTA Advance
      2. GTA 2
      3. GTA
    1. GTA Mods

      1. GTA V
      2. GTA IV
      3. GTA III, VC & SA
      4. Tutorials
    2. Red Dead Mods

      1. Documentation
    3. Mod Showroom

      1. Scripts & Plugins
      2. Maps
      3. Total Conversions
      4. Vehicles
      5. Textures
      6. Characters
      7. Tools
      8. Other
      9. Workshop
    4. Featured Mods

      1. Design Your Own Mission
      2. OpenIV
      3. GTA: Underground
      4. GTA: Liberty City
      5. GTA: State of Liberty
    1. Rockstar Games

    2. Rockstar Collectors

    1. Off-Topic

      1. General Chat
      2. Gaming
      3. Technology
      4. Movies & TV
      5. Music
      6. Sports
      7. Vehicles
    2. Expression

      1. Graphics / Visual Arts
      2. GFX Requests & Tutorials
      3. Writers' Discussion
      4. Debates & Discussion
    3. Gangs

    1. Announcements

    2. Support

    3. Suggestions

Trying to display filename below gifs


komalr

Recommended Posts

This is not my code, found it and is quite useful in my line of work. I've never dabbled with html scripting so don't know where to even start. Here, I just wanted to add a new feature but am not able to. Can someone please help me with this?

 

This script allows me to drag gif file on to the page and build a gallery but I also want to add the names of the files below the image. The script right now shows the names but not correctly.

 

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="holder" class="">
<style>
#holder {background-color: white; width: 100%; height: 100%;}
#holder.hover {background-color: lightgray;}
.center {text-align:center;}
.agif {width: 196px; vertical-align:middle;}
.agif {width: auto; vertical-align:middle; margin: 2px;}
body {border: 0px solid red;margin:0; padding: 0;height:100%}
html {height:98%}
</style>
<article>
  <p id="status"></p>
  <p>Drag images (gif/jpg/png/bmp) from your desktop into this window to build a gallery.</p>
  <p>Save as complete web page with your images embedded in the page. Then reload into a
     browser to see your gallery again.</p>
  <p id="pics"><img class="agif" 
</article>
</div>

<script>
var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader !== 'undefined') {
  state.innerHTML = 'File API & FileReader available';
}
 
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondragleave = holder.ondragend;
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  for (var i = 0; i < e.dataTransfer.files.length; i++ ) {
    var reader = new FileReader();
    var f = e.dataTransfer.files[i];

    reader.onload = function (event) {
      var pics = document.getElementById('pics');
      pics.innerHTML = pics.innerHTML + "<img class='agif' src='" + event.target.result + "'>" + f.name +"/>";
    };
    reader.readAsDataURL(f);
  };
  return false;
};

</script>


</body></html>
Link to post
Share on other sites
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="holder" class="">
<style>
#holder {background-color: white; width: 100%; height: 100%;}
#holder.hover {background-color: lightgray;}
.center {text-align:center;}
.agif {width: auto; vertical-align:middle; margin: 2px; display: inline-block;}
body {border: 0px solid red;margin:0; padding: 0;height:100%}
html {height:98%}
</style>
<article>
  <p id="status"></p>
  <p>Drag images (gif/jpg/png/bmp) from your desktop into this window to build a gallery.</p>
  <p>Save as complete web page with your images embedded in the page. Then reload into a
     browser to see your gallery again.</p>
  <p id="pics"></p>
</article>
</div>

<script>
var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader !== 'undefined') {
  state.innerHTML = 'File API & FileReader available';
}
 
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondragleave = holder.ondragend;
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  for (var i = 0; i < e.dataTransfer.files.length; i++ ) {
    var reader = new FileReader();
    var f = e.dataTransfer.files[i];

    reader.onload = function (event) {
      var pics = document.getElementById('pics');
      pics.innerHTML += `<div class='agif'><img src='${event.target.result}'/></br>${f.name}</div>`;
    };
    reader.readAsDataURL(f);
  };
  return false;
};

</script>


</body></html>

I only fixed things that seemed to matter, so it's not great, but it seems to work. Note that I've enclosed the image and text into a separate div, moved the agif class to that, and gave that class a display: inline-block, which makes it work the same way the images used to, but now it's the entire image + title block. Hope that helps.

  • Like 1
Link to post
Share on other sites

Thanks a lot, this does seems to work except for the names. All the images I drag seem to have the same name until and unless I drag them one by one.

Edited by komalr
Link to post
Share on other sites

So, I've got this. This fixes the issue of name but it's assigning the wrong names whenever i'm dropping multiple files.

 

So, I've got this. This fixes the issue of name but it's assigning the wrong names.


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="holder" class="">
<style>
#holder {background-color: white; width: 100%; height: 100%;}
#holder.hover {background-color: lightgray;}
.center {text-align:center;}
.agif {width: auto; vertical-align:middle; margin: 10px; display: inline-block;}
body {border: 0px solid red;margin:0; padding: 0;height:100%}
html {height:98%}
</style>
<article>
  <p id="status"></p>
  <p>Drag images (gif/jpg/png/bmp) from your desktop into this window to build a gallery.</p>
  <p>Save as complete web page with your images embedded in the page. Then reload into a
     browser to see your gallery again.</p>
  <p id="pics"><img class="agif"></img></p>
</article>
</div>

<script>
var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader !== 'undefined') {
  state.innerHTML = 'File API & FileReader available';
}
 
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondragleave = holder.ondragend;
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  var files=[];
  var results=[];
  var no=0;
  for (var i = 0; i < e.dataTransfer.files.length; i++ ) {
    var reader = new FileReader();
    var f = e.dataTransfer.files[i];
    //console.log("i ki value "+i);
    //console.log("file name "+f.name);
    files.push(f);
    results.push(event.target.result);
    // if(i==1){
    reader.onload = function (event) {
      for(var j=0;j<files.length;j++){
        if(j==no){
        //console.log(j+".  "+i);
        // if(j==i){
      var pics = document.createElement('pics'+j);
      // var pic=document.getElementById('pics'+i);
      //console.log('pics'+j);
      //pics.innerHTML = "<br><br><img class='agif' src='" + event.target.result + "'></img><br>" + files[j].name +"";
      pics.innerHTML += `<div class='agif'><img src='${event.target.result}'/></br>${files[j].name}</div>`;
      holder.appendChild(pics);
    }}
      no+=1;
    };
    reader.readAsDataURL(f);
  };
  // holder.style.height="10%";
  return false;
};

 

 

Edited by komalr
Link to post
Share on other sites

Ah, yes, that's a common problem in old style handler functions. They had no concept of bound context. And because in your code the onload can get called in arbitrary order, names can get switched around. You can resolve that with a new ES6 style lambdas. So this should work.

 

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="holder" class="">
<style>
#holder {background-color: white; width: 100%; height: 100%;}
#holder.hover {background-color: lightgray;}
.center {text-align:center;}
.agif {width: auto; vertical-align:middle; margin: 2px; display: inline-block;}
body {border: 0px solid red;margin:0; padding: 0;height:100%}
html {height:98%}
</style>
<article>
  <p id="status"></p>
  <p>Drag images (gif/jpg/png/bmp) from your desktop into this window to build a gallery.</p>
  <p>Save as complete web page with your images embedded in the page. Then reload into a
     browser to see your gallery again.</p>
  <p id="pics"></p>
</article>
</div>

<script>
var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader !== 'undefined') {
  state.innerHTML = 'File API & FileReader available';
}
 
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondragleave = holder.ondragend;
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  for (var i = 0; i < e.dataTransfer.files.length; i++ ) {
    var reader = new FileReader();
    var f = e.dataTransfer.files[i];
    const name = f.name;
    const pics = document.createElement('pics' + i);

    reader.onload = (event) => {
      pics.innerHTML = `<div class='agif'><img src='${event.target.result}'/></br>${name}</div>`;
      holder.appendChild(pics);
    };
    reader.readAsDataURL(f);
  };
  return false;
};

</script>


</body></html>

 

I'm not an expert on JS by any means, but the way I understand it, with the ()=>{} style lambdas you create a new instance of it every time it's bound in that loop, and along with the lambda itself, it binds the values of all the variables it uses inside. In this case, the string name and pointer to element pics. Use of const over var is purely syntactic sugar. Modern JS style is to use const or let instead of var. But afaik, this should have worked with var just the same.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • 2 Users Currently Viewing
    0 members, 0 Anonymous, 2 Guests

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.