Multiple files about django-chunked-upload-demo HOT 5 OPEN

<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>

// 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();
}
}