How to create file upload like gmail?

Question

I am having a code with "upload" and done "button". It will select the file on clicking of "upload" and upload the file on clicking "Done" in the given location. But I need to auto-upload file, like Gmail attachment. Can anyone help me out pls

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. — daker, Jun 10 '15 at 06:23
I have written the code using php, jquery for file uploading. In the i am having two button "upload" and done "button". It will select the file on clicking of "upload" and upload the file on clicking "Done" in the given location.. Without clicking "Done" file should auto upload like we do in gmail @daker — Ishwarya Prakash, Jun 10 '15 at 07:03
I cant understand your question anyway i hope this link is help for you. http://stackoverflow.com/questions/13711264/php-upload-auto-submit-after-browse-a-file — KOUSIK daniel, Jun 10 '15 at 06:25

score 1 · Answer 1 · answered Jun 10 '15 at 06:28

1

You can use a 3rd party libraries for implementing drag, drop and auto upload features as well. There is one library which I know is http://www.dropzonejs.com/

answered Jun 10 '15 at 06:28

Mohit

569
2
8

Thanx @Mohit. I have written the code using php, jquery, will this work for those type code? if so where i need to import it? thanx in advance – Ishwarya Prakash Jun 10 '15 at 07:05
You just need to load dropzone js in your script tag and add a class dropzone in your form tag.For more information you can go to the documentation [link](http://www.dropzonejs.com/#usage) – Mohit Jun 10 '15 at 07:36

score 1 · Accepted Answer · answered Jun 11 '15 at 08:01

Try this code....

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>
function updateSize() {
  var nBytes = 0,
      oFiles = document.getElementById("uploadInput").files,
      nFiles = oFiles.length;
  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
    nBytes += oFiles[nFileId].size;
  }
  var sOutput = nBytes + " bytes";
  // optional code for multiples approximation
  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
  }
  // end of optional code
  document.getElementById("fileNum").innerHTML = nFiles;
  document.getElementById("fileSize").innerHTML = sOutput;
}
</script>
</head>

<body onload="updateSize();">
<form name="uploadForm">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Done"></p>
</form>
</body>
</html>

How to create file upload like gmail?

2 Answers2