use a plugin like dropzone. This will do all the sending for you.
Individual uploads via Ajax to prevent timeouts etc
I have a client who needs to upload large amounts of images at the same time ("busy, busy, busy - I just want to 'select all' and have them all upload, all 100 (or so) of them…" - that type of thing.).
Initially he wanted to upload one image, all of a sudden its over 100! I can simply change it to upload multiple files but since some of the files could be over 8mb I was thinking in order to prevent timeout issues and long script executions, I could just loop through the files in the browser and upload them one by one via jQuery.
The thing is, whilst its easy enough to loop through them all, I'm not sure how to 'grab' and send up each file which has been selected via the file input (multiple).
My form is as follows:
<form role="form" name="photographUploadForm" method="post" enctype="multipart/form-data">
My file input is:
<input type="file" name="upload_new_photograph" id="upload_new_photograph" multiple>
My ajax call contains the following:
$("#upload-photograph-button").click(function (e) {
e.preventDefault();
var files = $('#upload_new_photograph')[0].files;
for(var i = 0; i<files.length; i++){
// Lets grab the name and size to make sure they're looping correctly
console.log(files[i].name+'----'+files[i].size);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
var form = document.forms.namedItem("photographUploadForm"); // Name of form
var formData = new FormData(form);
$.ajax({
type: 'post',
url: 'urlgoeshere',
dataType: 'json',
contentType: false,
data: formData,
processData: false,
success: function(returnedData){
… etc
The above will loop through the multiple images (and log the individual names) correctly but (obviously) only uploads the same image multiple times, so I need to only upload each respective file contained in the loop.
Can anyone advise how I would do this (or if there's an alternative way of getting around timeout and script execution times)?
Any help most appreciated!
P.S. I'd rather not edit the server configuration to allow scripts to run for really long times etc
Okay, here's what I did. I just converted them to Base64 in the browser, pinged them up to the controller and used Intervention to generate the image and thumbnails as usual.
Did a test with 200 images (more than would be uploaded in one go) and had no timeout errors etc.
I'm sure there's probably a better way but this seems to do the trick for now.
Please or to participate in this conversation.