How to edit css when file is uploaded - javascript

I have a form where users can upload a file. The uploading and validation afterwards (filesize, filetype...) is done with php by submitting.
But I wonder how I could give the user a "visual feedback" that his file was "picked" immediately. So I don't need validation nor anything complex. I just want to either color the label green or rename the label of the upload field when the user has selected a file and clicked "Choose" in his browser.
How would I do that most easily?

On success assign one variable then use that variable to add class to the element.

Related

Automatically choose file for website upload based on last submission?

So, I am on a 'competitive coding' website which requires me to manually select a file ("choose file") to submit to the online testing grader. I was wondering, since there are a multitude of extensions on chrome that allow me to auto-fill a form option, is there a way to automatically fill the "choose file" button when submitting a code file based on the last file I chose when clicking that same "choose file" button webpage?
Unfortunately JS can't help here. For security reasons, it is not possible to manually add and upload a file in a file input control with JavaScript.
The reason behind this is that webpages would be able to upload files from someone's computer, so long as they knew the path.
What you could do as a last resort would be using a third party software that would register mouse clicks for you and emulate a real user acting on the interface.
You cannot do that since this input type cannot be prefilled, here is a trick though :
What you can do is having an hiden collection of text inputs containing the base64 of the files you load using your form.
When a user selects a file, just use btoa() and atob() methods to base64-it and store it in this hidden form input
If you want to 'preset' some files, just fill your list of base64 and simply display a kind of placeholder to show that you have a file 'already appended'
Then in your script when form is submitted, work with the list of base64 instead of the actual values from the input type file

Laravel 6 Multiple File preview with remove

I want to ask,
so I have a form whose contents one of which is to upload multiple files, then after I browse the file, then the file will appear (preview),
then the user will have access to choose the file to upload when it is not wanted then there is a delete button for wrong one file.
then after all okay, then the form will be uploaded.
then after that the user will be able to edit the file again through another page without deleting the old file.
this is what I want,
user fills in the input form
when in the input file field, the user can select several files
Then after clicking OK, the selected file will be displayed
The user can delete one of the unwanted files
after all okay the user submit the form to db
like the display on wetransfer
can anyone teach me?

How to disable submit in AngularJS in following scenario?

I am having some trouble with disabling Submit button in a HTML form in AngularJS.
Scenario:
I am selecting a certain process from a HTML Select Box ie. Drop
Down List
Once I select some entry from that, the lower portion is
automatically populated with the required form which again has a set
of inputs
Once you fill in these value, you can either Submit or Cancel the request
Condition:
There is a process in the list where I need to upload 1 or more files along with other input parameters. To do this, I am using a two step approach where I first Choose a File using a button and then I use another button to Upload the file. Clicking on this button makes a REST call and the file is sent to the required target.
I am using ng-file-upload directive from https://github.com/danialfarid/ng-file-upload to accomplish this.
Problem:
I was initially using ng-disabledto disable submit button on the condition that All mandatory input elements are filled and all input validations are passed. Now the problem occurs when I am in the use cases which need files to be uploaded. When I choose a file and upload it, HTML treats that element as empty as the file is already sent to its target and hence fails the validation All mandatory input elements are filled! If I remove this validation, my form expectedly get submitted even if Mandatory fields are empty.
So what can I do in this case to disable my submit button?
Create a boolean variable as what #ShashankVivek said.
if file uploaded $scope.uploaded = true.
so your button should look like this
<button data-ng-disabled="!form.valid && !uploaded">Submit</button>

Get file name from Django imagefield before submit with jQuery

Its the basic Django image file upload process form. The image model is using the ImageField class. I have a custom display button over the default upload button that normally displays the name of the image to the side of it. I need to be able to grab that name of the file so that I can display it to the user.
I've tried to check the input field with a jQuery selector, but nothing about it changes when a file has been selected. I searched the page of html for the file name and nothing returned.
Of course, this needs to be done before the image has been submitted but after it has been selected. Any help is greatly appreciated.
Thank you.
ImageField inherits from FileField methods and attributes. Take a look in a similar question for FileField:
FileField Size and Name in Template

File Upload - Remove Value From Input Box

I have a file input element like this:
<input name="fileupload[]" id="fileupload" type="file" multiple="" />
A user browses for their files and selects them, the files then appear in a list.
Now say a user wants to not add a particular file they hit a cancel button and it is deleted. That works but how do I remove the value from the fileupload input so that when they do upload the file that is meant to be deleted isn't added?
You could use javascript to place a hidden input with each separate file instead of holding them in an array initially, then attach an event handler onSubmit which could collect all the separate files and upload them.
When you need to delete a file from the 'queue' you could just use your javascript to remove the hidden input the same way you are removing it from the list.
If you'd like some code examples, please post some of your code to get us started - it is hard to post code for you if there is no indication of such things like which server side language you are using to handle the files and what javascript you are using to handle the client side code.
You cannot set the value(or clear the value) of a file-input, but you can replace the input with a new input, the effect would be the same.

Categories