Multiple files

[SpaceK33z]

I was looking at how to use this nice demo with multiple files, but couldn't get it work yet. If the files are uploaded fast enough, it works sometimes. But mostly I get this error:

{
  "detail": "Offsets do not match",
  "offset": 53807448
}

First in the template I changed this:

<input id="chunked_upload" type="file" multiple name="the_file">

I think it does not work because of how chunkdone handles formData (here).

[juliomalegria]

Hi again @SpaceK33z :) Could you elaborate a little bit more what are you trying to do, and what's the issue?

[SpaceK33z]

Sure. The issue is that multiple files uploading does not work. I know it is not included in the demo, but I think it would make sense that the demo code also works with multiple file uploads (because this is one of the powers of JFU) without having to completely rewrite the code.

It think that it doesn't work because of how the formData option of JFU is used; it sends the wrong upload_id when multiple files are uploaded. I tried to get it to work myself, but I haven't figured out yet how to fix this properly.

[juliomalegria]

Interesting... I just merged pull request #2 that addressed an issue when uploading a second file. Could you try again, and let me know if that fixed it?

[SpaceK33z]

Nice! Didn't see that one. This is however not completely related. With multiple files I'm talking about selecting multiple files on a upload and uploading them all together.

[phoebebright]

In case it helps, this is my multiple upload code. It is also customised to include some data linked to the image - sheetid and entryid

The HTML::

<div id="add_images">
<div class="row add_image_row">


	<div class="input-field col s6 m4">


		<div class="btn fileinput-button" data-page="1">

			<i class="material-icons">add</i>
			<span>Add Page 1...</span>
			<!-- The file input field used as target for the file upload widget -->
			<input id="chunked_upload_1" class="chunked_upload" name="files" type="file" accept="image/*" capture="camera" data-page="1">
			


		</div>
	</div>

	<div class="input-field col s12 m6">
		<div id="progress_1" class="progress">
			<div class="determinate" style="width: 0%"></div>
		</div>
		<div id="messages_1"></div>
	</div>

</div>
<div class="row add_image_row">


	<div class="input-field col s6 m4">


		<div class="btn fileinput-button" data-page="2">

			<i class="material-icons">add</i>
			<span>Add Page 2...</span>
			<!-- The file input field used as target for the file upload widget -->
			<input id="chunked_upload_2" class="chunked_upload" name="files" type="file" accept="image/*" capture="camera" data-page="2">
			


		</div>
	</div>

	<div class="input-field col s12 m6">
		<div id="progress_2" class="progress">
			<div class="determinate" style="width: 0%"></div>
		</div>
		<div id="messages_2"></div>
	</div>

</div>
</div>

And the customised javascript::

// related to file uploads
var md5 = "",
	csrf = $("input[name='csrfmiddlewaretoken']")[0].value,
	form_data = [{"name": "csrfmiddlewaretoken", "value": csrf}];


//TODO: http://blueimp.github.io/jQuery-File-Upload/basic-plus.html
$('.chunked_upload').fileupload({


	url: API_FILE_UPLOAD_URL,
	dataType: 'json',

	maxChunkSize: 200000, // Chunks of 100 kB
	formData: form_data,

	disableImageResize: /Android(?!.*Chrome)|Opera/
		.test(window.navigator && navigator.userAgent),
	imageMaxWidth: 2000,
	imageMaxHeight: 2000,

	add: function(e, data) { // Called before starting upload
		var page = $(data.fileInput[0]).data('page');
		$("#messages_"+page).empty();
		// If this is the second file you're uploading we need to remove the
		// old upload_id and just keep the csrftoken (which is always first).
		form_data.splice(1);
		calculate_md5(data.files[0], 100000);  // Again, chunks of 100 kB

		data.submit();
	},
	chunkdone: function (e, data) { // Called after uploading each chunk
		var page = $(data.fileInput[0]).data('page');
		if (form_data.length < 2) {
			form_data.push(
				{"name": "upload_id", "value": data.result.upload_id}
			);
		}
		// $("#messages").append($('<p>').text(JSON.stringify(data.result)));
		var progress = parseInt(data.loaded / data.total * 100.0, 10);
		$("#progress_"+page+ " .determinate").css( "width", progress+"%");
		//style="width: 70%"
	},

	done: function (e, data) { // Called when the file has completely uploaded
		var page = $(data.fileInput[0]).data('page');
		var upload_id = data.result.upload_id;
		$.ajax({
			type: "POST",
			url: API_FILE_UPLOAD_COMPLETE_URL,
			data: {
				csrfmiddlewaretoken: csrf,
				upload_id: data.result.upload_id,
				md5: md5,
				orig_filename: data.fileInput[0].value,
				sheetid: sheetid,
				entryid: $("#add_images").data('entryid'),
			},
			dataType: "json",
			success: function(data) {
				// add this upload to the viewmodel
				viewModel.uploads[page] = upload_id;

				//TODO: display just uploaded image to avoid this hack
				if (sheetid>0) {
					//$("#messages_" + page).html(data.message + "  Refresh page to see uploaded image.").removeClass("error").addClass("success");
					$("#messages_" + page).html('  <i class="material-icons">check_circle\n</i>').removeClass("error").addClass("success");

				} else {
					$("#messages_" + page).html(data.message).removeClass("error").addClass("success");
				}
				// $("#messages").append($('<p>').text(JSON.stringify(data)));
			},
			fail:function( jqXHR, textStatus, errorThrown) {

				try {
					$("#messages").html("ERROR: " + JSON.parse(jqXHR.responseText).detail);
				}
				catch (err) {
					$("#messages").html("ERROR: " + jqXHR.responseText);
				}


			}

		});
	},
	fail: function (e, data) {
		var page = $(data.fileInput[0]).data('page');
		var msg = '';

		if (typeof data.messages.uploadedBytes != "undefined" && data.messages.uploadedBytes.indexOf("exceed") > -1) {
			msg = "File is too big - maximum size is 20Mb";
		} else {
			msg = JSON.stringify(data.messages);
		}
		$("#messages_"+page).html(msg).removeClass("success").addClass("error");

	}
});


function calculate_md5(file, chunk_size) {
	var slice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
		chunks = Math.ceil(file.size / chunk_size),
		current_chunk = 0,
		spark = new SparkMD5.ArrayBuffer();
	function onload(e) {
		spark.append(e.target.result);  // append chunk
		current_chunk++;
		if (current_chunk < chunks) {
			read_next_chunk();
		} else {
			md5 = spark.end();
		}
	}
	function read_next_chunk() {
		var reader = new FileReader();
		reader.onload = onload;
		var start = current_chunk * chunk_size,
			end = Math.min(start + chunk_size, file.size);
		reader.readAsArrayBuffer(slice.call(file, start, end));
	}
	read_next_chunk();
}
}