Basically, what I want to do is get data from the server and display on the update page in my project. So over here, I have an image to display and yes, it displays in the <div> to show the image of Taylor Swift. However, I have a problem which I can't find a way to display the file name in the file input itself. (see picture below)
So expected behaviour would be, the file name gotten from the data from the server, would show in the input itself. E.g. taylorswift.jpeg
Is there any way I can do this using javascript? Currently working on a VueJS 2 project.
File input field does not allow to select files or set currently selected file name programmatically due to security reasons. But you could create a sort of fake input field using some approaches, on of which is embedding hidden file input field inside a button element as you can see in this sample.
<button class="fake-file__input-col">
<input type="file" class="fake-file__input" #change="onFileInputChange"/>
</button>
So when you receive image name from server you can use it to display in your fake input, and when user selects a file with this input, his actual selected file name will be displayed as well.
Related
I am creating a product registration using php and using vanilla js to get the selected images from the file input and preview them in the screen. Now I want to provide a way for the user to remove unwanted images before submitting the form.
The form has the images and other inputs for the title of the product, description, price and category selection.
I have seen so far in many places people telling that you can use a dataTransfer object to store the images and remove from the dataTransfer and after making the file input (=) the dataTransfer but none of the answers I've found so far have worked.
Is there a way to remove images from the file input once they are selected?
#CBroe I'm talking about Data Transfer in js (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer). Thank you for your comment. If it's not possible to remove files from the filelist of the file input I will have to store those data somewhere and create an arbitrary submission of the form.
Thank you
#RiggsFolly the user clicks on the file input <input type="file" multiple> and selects (let's say) 4 images. These images are read by the js script and displayed on the screen, as a preview. I want to provide a small garbage icon on top of each image and let the user be able to remove specific images.
I wanted to know if it's possible to remove the selected images from the files inserted on the file input. Then I would remove the image using the name of the file as reference (or any other reference). I just never found a way to remove files from the input file.
I created a PDF using Acrobat. It includes a List field to which I've mapped a CSV file. The field is populated by an Solutions Business Manager (Micro Focus) form widget. The field appears in comma-delimited form when the PDF is opened. Do I need to apply a javascript in the Acrobat Prepare Form function, in the field Properties dialog box, in order to display the values as a List? And where would I find such a script?
A javascript worked on the SBM side. The relevant command is:
var newListValue = commaDelimValue.replace(/,/g, '\n');
I'm guessing that on account of whatever SBM process writes the content to the PDF, the usual javascript in the PDF Format tab won't work.
I have an Angular keystroke service that I am listening to keyboard keystrokes & performing actions based on the keystroke pressed.
I have a keyboard shortcut that I would like for it to open the file dialog, & the user should select a specific JSON file to upload, & then use this JSON data & convert to an object to use in the system.
The normal way of uploading a file is trough a HTML: <input type="file" />. However I am in a service and I don't need an input element, nor do I have where to put it. as I don't think a service should contain HTML.
How can I accomplish to trigger the file dialog box to open in a function & get the data of the selected JSON file that without an input and without downloading any external npm packages.
Unfortunately, <input type="file"> is a little bit special in HTML. You cannot generate such an event in JavaScript that would correspond clicking this input.
The only way to trigger this programmatically is to have a hidden UI component where this input is added and then the click triggered.
User click the uploader several times to upload multiple files(for example, a.txt, b.txt, c.txt), but server can only receive the last file(c.txt). Is there anything else needed to implement multiple files uploader?
<form action="storeArticle" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple >
<input type="submit" name="submit" class="submit" id="submit" value="submit" />
</form>
==========
What I want to implement is like https://stackoverflow.com/questions/ask. User can click the image icon as many times as they want, and finally all the images will be sent to server conrrectly.
When you say they click the uploader several times, do you mean having to open the file explorer each time to add one file? If so, then this will cause it to lose the other files that were previously selected.
The way to fix this is for your users to ctrl/cmd+click each file they want while only opening the file explorer once.
File inputs even remove the selected file when you open a file explorer and then press cancel.
EDIT
Just a thought, I'm on a phone so I can't test this but maybe you can play around with it...
have an input field that will be there from start to finish. When they select their first file, make the button (best to use a <label>) they click no longer open that file input. Instead, append a dynamic file input and make the label's for attribute equal to the dynamically added file input. After you add the dynamic input, create a listener for it so when the user selects a file in that new input it is appended to the original input.files array. Once this happens the process starts all over again, the dynamic input handles the file selection and passes it to the original input when a file is selected.
The reason it is best to hide the actual choose file button is because it can be a bit inconsistent at times. Instead, using the label element with the input element's id as the label's for attribute guarantees that clicking the label will focus the file upload field.
I was going to add this as a comment, but I can't.
Have you tried cloning the input and adding it to the form?
Then when the user selects a file you would could either add the new input, add the new input and hide the "populated" ones, or add the new input and mark the "populated" ones as readonly (you would want to add some method to remove them).
i have taken a code from http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/ where multiple file upload is possible, i have integrated the code in my project, but here my issue is my form is created dynamically by the user, so field name is dynamic, in such case my js function having an id as #swfupload-control and button_placeholder : $('#button)[0], only works for a single input type button, and other buttons are blank as they are getting the id but not working