Menu icon Foundation
Image gallery upload with thumbs and progress bars

First of all I would like to say thanks so much for this framework. I have tried out a few and Foundation seems to have just enough features, not too heavy and not too light.

I have recently been working on a project that requires a nice uploader for image galleries. So using that I found at

http://www.extremecss.com/creating-asynchronous-file-upload-system-using-html5-file-api/

and foundation 5 I put together this and I think that it could form the basis of a really nice upload page for other foundation users out there. To make it nice and brief I have chopped out some of the extraneous code.

<!-- HTML upload form and preview grid using block grid  -->
  <div class="row">
    <div class="large-12 medium-12">

    <form>
      <fieldset>
      <legend>Photos</legend>
	<input type="file" id="file" accept="image/*" name="file" multiple value="Add photos" disabled onchange="showThumbnails()"/>
      </fieldset>
	</form>
	
	<div id="preview">
	  <ul id="previewPane" class="medium-block-grid-3 large-block-grid-4">
	  	  
	  </ul>
	</div>
    </div>    
</div>           

         

<!-- Javascript function to add thumbnails and progress bars to the grid -->
function showThumbnails(){
 
  var files= document.getElementById('file').files;
  
  $('#previewPane').html('');
 
  for(var i=0;i<files.length;i++){
 
    var file=files[i];
 
    var image = document.createElement("img");
        
    $('#previewPane').append('<li id="photo' + i + '">');
    
    $('#photo' +i).append(image);
    
    $('#photo' +i).append('<div id="progress'+ i +'" class="progress large-12 medium-12 success round"><span class="meter" style="width: 0%"></span></div>');
    

    var fileReader= new FileReader();
 
    fileReader.onload = (function(img) { return function(e) { img.src = e.target.result; }; })(image);
 
    fileReader.readAsDataURL(file);
    
    uploadFile(file, i); 
  }
 
}
            

         

<!-- The actual upload function that updates progress bars and uploads the images to a script (in my case php) -->
 
function uploadFile(file, i){ 
  var xhr = new XMLHttpRequest(); 
  var formData = new FormData();
 
  formData.append('file',file);
 
  xhr.upload.addEventListener("progress", function(e) { 
    if (e.lengthComputable) { 
        var percentage = Math.round((e.loaded * 100) / e.total); 
        $("#progress" + i).html('<span class="meter" style="width: '+ percentage +'%"></span>');
    } 
  }, false);
 
  xhr.upload.addEventListener("load", function(e){
 
    $("#progress" + i).html('<span class="meter" style="width: 100%"></span>');;
 
  }, false);
 
  xhr.open("POST", "upload.php"); 
 
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
 
  xhr.send(formData);
 
}
           

         

Foundationhtml5file uploadasynchronousthumbnails

First of all I would like to say thanks so much for this framework. I have tried out a few and Foundation seems to have just enough features, not too heavy and not too light.

I have recently been working on a project that requires a nice uploader for image galleries. So using that I found at

http://www.extremecss.com/creating-asynchronous-file-upload-system-using-html5-file-api/

and foundation 5 I put together this and I think that it could form the basis of a really nice upload page for other foundation users out there. To make it nice and brief I have chopped out some of the extraneous code.

<!-- HTML upload form and preview grid using block grid  -->
  <div class="row">
    <div class="large-12 medium-12">

    <form>
      <fieldset>
      <legend>Photos</legend>
	<input type="file" id="file" accept="image/*" name="file" multiple value="Add photos" disabled onchange="showThumbnails()"/>
      </fieldset>
	</form>
	
	<div id="preview">
	  <ul id="previewPane" class="medium-block-grid-3 large-block-grid-4">
	  	  
	  </ul>
	</div>
    </div>    
</div>           

         

<!-- Javascript function to add thumbnails and progress bars to the grid -->
function showThumbnails(){
 
  var files= document.getElementById('file').files;
  
  $('#previewPane').html('');
 
  for(var i=0;i<files.length;i++){
 
    var file=files[i];
 
    var image = document.createElement("img");
        
    $('#previewPane').append('<li id="photo' + i + '">');
    
    $('#photo' +i).append(image);
    
    $('#photo' +i).append('<div id="progress'+ i +'" class="progress large-12 medium-12 success round"><span class="meter" style="width: 0%"></span></div>');
    

    var fileReader= new FileReader();
 
    fileReader.onload = (function(img) { return function(e) { img.src = e.target.result; }; })(image);
 
    fileReader.readAsDataURL(file);
    
    uploadFile(file, i); 
  }
 
}
            

         

<!-- The actual upload function that updates progress bars and uploads the images to a script (in my case php) -->
 
function uploadFile(file, i){ 
  var xhr = new XMLHttpRequest(); 
  var formData = new FormData();
 
  formData.append('file',file);
 
  xhr.upload.addEventListener("progress", function(e) { 
    if (e.lengthComputable) { 
        var percentage = Math.round((e.loaded * 100) / e.total); 
        $("#progress" + i).html('<span class="meter" style="width: '+ percentage +'%"></span>');
    } 
  }, false);
 
  xhr.upload.addEventListener("load", function(e){
 
    $("#progress" + i).html('<span class="meter" style="width: 100%"></span>');;
 
  }, false);
 
  xhr.open("POST", "upload.php"); 
 
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
 
  xhr.send(formData);
 
}
           

         
abdessamad idrissi over 4 years ago

Thanks for sharing this. Is it cross browser compatible?

Michael 5 months ago

I know this post is quite old. But if anyone interested in a robust VPN. Check Web Tunnel. You can download web tunnel easily from their official website. Great post btw.

srirajsing 5 months ago

I really like your blog for those correct contents you are sharing. 

Rahul Sharma 5 months ago

Nice and Helpful Post thanks for sharing with us.