Javascript Add multiple file inputs - javascript

I have a form and file input. I want to select images from another folder.
echo '<pre>';
var_dump($_FILES);
echo '</pre>';
When I send my form I need to see all selected images but I see only the last selected.
For example, the first time I select 2 files. After selecting 5 files and submitting my form I see only the last selected files, but I need to send all 7 files. Is it possible??
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" id="sell-images" name="images[]" multiple>
<input type="submit" value="submit">
</form>
I have this function for file counter:
$.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
var fileIdCounter = 0;
this.closest("#sell-images").change(function (evt) {
var output = [];
for (var i = 0; i < evt.target.files.length; i++) {
fileIdCounter++;
var file = evt.target.files[i];
var fileId = sectionIdentifier + fileIdCounter;
filesToUpload.push({
id: fileId,
file: file
});
};
for(var z = 0; z < filesToUpload.length; z++)
{
evt.target.files[z] = filesToUpload[z]['file'];
}
console.log(evt.target.files)
});
return this;
};
Here is my onchange function:
$(document).ready(function() {
var filesToUpload = [];
var files1Uploader = $("#sell-images").fileUploader(filesToUpload, "images[]");
$("#sell-images").on('change',function(e) {
e.preventDefault();
Here I see in console all selected files from another folder
console.log($("#sell-images")[0].files);
var formData = new FormData();
for (var i = 0, len = filesToUpload.length; i < len; i++) {
formData.append("files", filesToUpload[i].file);
}
});
});
Here I have all selected files, but when I want to select a new file and send post in my PHP file, the global variable $_FILES shows me only the last selected files.
How can I send my all selected files?
I can do it with another technique every time when selecting a file with JavaScript hide that input and create new but I don't want that.

..., but I need to send all 7 files. Is it possible??
Yes it is possible.
How can I send my all selected files?
Use the array syntax for multiple files. With the current implementation, the last file overwrites all previous entries in the formData object. So update this line:
formData.append("files", filesToUpload[i].file);
To this:
formData.append("files[]", filesToUpload[i].file);
That way all the files in the array filesToUpload will be sent, instead of just the last one.
See this demonstrated in this plunker.

Related

how to get file details with specifying path with output same format as event.target.files

Here is my code:
<body>
<input type="file" id="invisible_file_input" name="files[]" style="display:none">
<div class="button_panel">
<span class="button" onclick="sel_local_images()">Select Files</span>
</div>
</body>
<script>
var invisible_file_input = document.getElementById("invisible_file_input");
var file_path = "C:\\Users\\a142\\Desktop\\data"
function sel_local_images() {
invisible_file_input.setAttribute('multiple', 'multiple');
invisible_file_input.accept = '.jpg,.jpeg,.png,.bmp';
invisible_file_input.onchange = project_file_add_local;
invisible_file_input.click();
}
function project_file_add_local(event) {
var user_selected_images = event.target.files;
console.log("MAIN FILE = ", user_selected_images);
for ( var i = 0; i < user_selected_images.length; ++i ) {
console.log("user_selected_images", user_selected_images[i]);
}
}
</script>
Output:
What above code does is it makes button Select Files and after selecting multiple files console.log gives me above output.
But what I want is instead of clicking button I just have to specify file_path variable. and it gives me same result above. So that whenever i open html file file_path gets executed and i get same output as what event.target.files is giving here but without Manually select files from button.

How to upload multiple files via Html form object with just one input field

I have created a Html form with file input field and multiple attribute activated
<input type="file" name="documents" multiple size="11">
This is the function that submits the form object to client side function
<script>
function handleFormSubmit(formObject) {
var div = document.getElementById('output');
var docs = document.getElementById('myFile');
var firstName = document.getElementById('first').value;
var lastName = document.getElementById('last').value;
var hid = document.getElementById("hidden");
for(i=0;i< docs.files.length ; i++){
div.innerHTML = hid+hid.file+"<h3>Please do not refresh or close the page. Your files are uploading...</h3>";
google.script.run.withSuccessHandler(update).uploadFile(formObject);
docs
}
</script>
This is the client side function implemented
function uploadFile(formObject) {
Logger.log("called");
var firstName=formObject.firstName;
var lastName=formObject.lastName;
var file = formObject.documents;
Logger.log(file);
var root = DriveApp.getRootFolder();
var folder,url;
if(root.getFoldersByName("Application Documents - Clients").hasNext()){
folder = root.getFoldersByName("Application Documents - Clients").next();
} else{
folder = root.createFolder("Application Documents - Clients");
}
if(folder.getFoldersByName(firstName+" "+lastName).hasNext()){
url = folder.getFoldersByName(firstName+" "+lastName).next().createFile(file).getUrl();
} else {
url = folder.createFolder(firstName+" "+lastName).createFile(file).getUrl();
}
return url;
}
The output is, I am getting only the first file uploaded thrice if the total file uploads are 3.
Means its just uploading the first file selected at the time of form submission.
I want to get all selected files uploaded to my drive on the same folder.
Thanks in advance

How would I get the number of files selected in a multi file input with Javascript?

I'm trying to get the number of files selected and change a div based on the number. The code I have is this:
HTML:
<input type="file" name="submit_image[]" id="submit_image" class="fileStyle" multiple>
Javascript:
//Get Files
var files = document.getElementById("submit_image");
function listFiles() {
var numFiles = files.length;
alert(numFiles);
}
//Test button to give me number of files
document.getElementById("test").onclick = function (e) {
listFiles();
}
When I click the button it just returns undefined. I would be open to doing this in jQuery but I prefer a Vanilla JS method. Thanks for the help.
You forgot to access the files property of the input element:
var files = document.getElementById("submit_image").files;
Fixed by this code:
var list = document.getElementById("submit_image");
function listFiles () {
var numFiles = list.files.length;
alert(numFiles);
}
document.getElementById("test").onclick = function (e) {
listFiles();
}

Jquery upload files when open button is pressed

i have the following code, the issue i have is that i am getting a error of e.originalEvent.dataTransfer is undefined.
my code is as follows
HTML
Select images: <input type="file" id='fileupload' name="userfile[]" multiple>
Javascript is as follows
var hot = $('#fileupload');
hot.change(function (e)
{
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
//send dropped files to Server
handleFileUpload(files,hot);
});
function handleFileUpload(files,obj)
{
for (var i = 0; i < files.length; i++)
{
var fd = new FormData();
var e = document.getElementById("child_id");
fd.append('userfile[]', files[i]);
var filename=files[i].name;
var status = new createStatusbar(obj,files[i]); //Using this we can set progress.
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status,filename);
}
}
The attribute files belongs to the input field. This you'll get by the target attribute.
If I test the setting above, I have success with this descriptor:
e.originalEvent.target.files
Then, files is an array of File objects, containing name, lastModifiedDate, type etc.

Input entry is not catched in Javascript

I tried to build an application in which , there is one HTML page from which I get single input entry by using Submit button, and stores in the container(data structure) and dynamically show that list i.e., list of strings, on the same page
means whenever I click submit button, that entry will automatically
append on the existing list on the same page.
But in this task, firstly I try to catch that input in javascript file, and I am failing in the same. Can you tell me for this, which command will I use ?
Till now my work is :-
HTML FILE :-
<html>
<head>
<script type = "text/javascript" src = "operation_q_2.js"></script>
</head>
<body>
Enter String : <input type= "text" name = "name" id = "name_id"/>
<button type="button" onClick = "addString(this.input)">Submit</button>
</body>
</html>
JAVASCRIPT FILE:-
function addString(x) {
var val = x.name.value;
//var s = document.getElementById("name_id").getElementValue;//x.name.value;
alert(val);
}
EDITED
My New JAVASCRIPT FILE IS :-
var input = [];
function addString(x) {
var s = document.getElementById("name_id").value;//x.name.value;
input.push(input);
var size = input.length;
//alert(size);
printArray(size);
}
function printArray(size){
var div = document.createElement('div');
for (var i = 0 ; i < size; ++i) {
div.innerHTML += input[i] + "<br />";
}
document.body.appendChild(div);
//alert(size);
}
Here it stores the strings in the string, but unable to show on the web page.
See this fiddle: http://jsfiddle.net/MjyRt/
Javascript was almost right
function addString(x) {
var s = document.getElementById("name_id").value;//x.name.value;
alert(s);
}
Try to use jQuery (simpler)
function addString() {
var s = $('#name_id').val();//value of input;
$('#list').append(s+"<br/>");//list with entries
}
<div id='list'>
</div>

Categories

Resources