Remove selected file(s) before upload with Javascript - javascript

Say I have a form that allows users to upload multiple images, which are appended with an option to remove them if they don't want to upload that particular photo.
Is it possible to remove the value from the files object of the one that they removed (e.g. didn't want to upload)?

FileList has no API to remove entries:
https://developer.mozilla.org/en/DOM/FileList
However you can reconstruct File uploader using XHR2 and AJAX and filter in content there.
This implies doing XHR2 and AJAX upload and is not suitable for traditional <form> uploads.
https://developer.mozilla.org/en/Using_files_from_web_applications

If you are using a standard form with a set of standard file inputs then you can do it like this http://jsfiddle.net/thXre/
$(document).ready(function(){
$('.remove').click(function(){
$(this).closest('div').slideUp('slow', function(){$(this).remove();});
});
});​
and html code:
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>

Libraries are your best bet before we get some standard API...
FineUploader. Demo. Has file delete, image preview, file rename.
bluimp's jQuery File Upload Plugin. Demo. Has file delete, image preview, individual file upload, upload undo.
They are also available at https://cdnjs.com/

Related

How can i upload files on dropzone.js with style="display: none;" using Selenium?

I'm trying to upload files on a website which using dropzone.js for file uploads.
I've found the file upload field in form, but the script stops without throwing any error.
I've also used find_elements_by_id("upload-input") to make sure there are not multiple fields with same id.
elem = driver.find_element_by_id("upload-input")
driver.implicitly_wait(2)
elem.send_keys("C:\KVR.pdf")
This is how html looks like:
<div id="fallback" style="display: none;">
<input id="upload-input" type="file" name="file" multiple="multiple">
<div id="upload-progress" class="upload-progress"></div>
</div>
As per the HTML you have shared the <input> tag is having style set to display: none;. You can use the following code block to upload the file :
element = driver.find_element_by_xpath("//div[#id='fallback']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
driver.find_element_by_xpath("//input[#id='upload-input']").send_keys("C:\\KVR.pdf")
DropzoneJS hides the <input type="file">
You can find those with the instruction below:
dz_inputs = driver.find_elements(By.XPATH, "//input[#type='file' and #class='dz-hidden-input']")
Then for example, to add a file to the first dropzone on the page, you should proceed as below:
dz_inputs[0].send_keys("/File/path/file_name.extension")

Uploading multiple files in php results in empty post

I am making a form with over 35 input fields and files that need to be uploaded with the form that can be relevant to that form's reviewing later.
In order to upload multiple files I wrote this script inside the form:
<script type="text/javascript">
function cancelFile(v){
$(v).closest('.input_file').remove();
}
function addFile(){
$('#files').append('<div class="input_file"><input name="attachment\[\]" type="file" ><img class="cancel_img" src="images/delete.png" onclick="cancelFile(this)"></div> ');
}
</script>
<input type="button" onclick="addFile()" value="Add file"><br><br>
<div id="files">
</div>
It basically appends an input of type file with the name attachment[] when an add file button is clicked, and a span that allows to cancel (remove) that input when clicked.
When I add only one file, all the POST data uploads fine: text, dates, files and all. But when I add multiple files, the POST request is empty: var_dump($_POST) shows me an empty array.
The form has enctype="multipart/form-data" declared.I also tried the uploading of multiple files in a separate test and it worked fine.
Anyone knows why my post ends up empty?

Dropzone.js DIV - not uploading files

I am trying to use dropzone.js (with Coldfusion 9) to upload potentially multiple files on one page. I first did this using the form tag:
<cfform name='UploadFiles' action="uploadfiles.cfm" class="dropzone">
and this worked as expected.
The problem is that I need the user to upload the files and then hit a submit button that processes the files. So I would need the information from each of the files uploaded. With this method, since each one is a separate form, I could not get all the file names on submit. Because of this, I changed the tag to a div tag inside of the form:
<cfform name='uploadfiles' action="uploadfiles.cfm">
.
.
.
<div id="my-dropzone" action="uploadfiles.cfm" class="dropzone">
</cfform>
<script>
new Dropzone(
url: "/uploadfiles.cfm" // Set the url
});
</script>
This works, as it shows the different dropzones and I can drag and drop a file or select one, but nothing ever gets uploaded to the location.
I am using the same code I used when the dropzone was a from to upload when the dropzone is a div:
<cffile action="upload" destination="#uploads#\Uploaded\#filen#" nameconflict="makeunique">
What am I missing in order for it to actually upload the file?

How to upload file using Protractor to the ng-file-upload element

The HTML is as follows:
<input type="file" style="display: none" ng-file-select="" ng-file-change="upload($files)" ng-multiple="multiple" accept=".jpg,.png">
I need to upload file to the element which uses ng-file-upload for uploading image file using Protractor:
var uploadFile = element(by.css('input[type="file"]'));
uploadFile.sendKeys('C:\\Temp\\test.png');
uploadFile.evaluate("openMetadataDialog({file:imgFile})");
The above is however not working. I am not able to understand how to upload the file!
As per my understanding, as soon as I sendkeys to input element, the upload function should be called itself! However, that does not seem to be happening!
Regards,
Sakshi
It seems that ng-file-upload doesn't react to .sendKeys(...), its file-change doesn't get invoked. You can use standard onchange event to invoke some custom upload logic:
<input type="file"
style="display: none"
onchange="angular.element(this).scope().upload(this)"
ng-file-select
ng-multiple="multiple"
accept=".jpg,.png">
this points to the input element which has a property files.

open file using jQuery

I try to open a file using jQuery. Here is my HTML,
<button onclick='load();'>load</button>
Here is my js code:
function load() {
var fileSelector = $('<input id="load" type = "file" multiple />');
fileSelector.click();
//code here to get the files ...
}
Now I want to get the loaded files, what should I do?
The HTML5 File Api (http://dev.w3.org/2006/webapi/FileAPI/) allows opening files, however the files must be selected by the User for security.
If you need to open a file without user interaction, then it is necessary to do this on the server side with a language like PHP for example.
Here's my solution
I used the file type input and then use the Jquery trigger function to trigger the click event for file input.
$(function(){
$("#btnFile").click(function(){
$("#file").trigger("click");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file" type="file" hidden/>
<button id="btnFile">Click Me</button>
You can open JSON file with JavaScript and use fetch('json_file patch') .

Categories