Change filename in file upload box - html

I have a file upload box and would like the ability to change the file name, but clicking in the box just brings up the Open Dialog. How can I prevent this?

It is kind of security thing that you can't manipulate the upload boxes. Browsers like chrome are entering there a C:/fakepath/yourfile.jpgstring so nobody can spy files on your PC. You can't manipulate it with javascript as well.

Related

How to show File Saveas Dialog in Blazor Server App

I am new to Blazor and trying to show File Saveas Dialog as shown in following link on a button click.
Save as Image
The requirement is - upon clicking the Saveas button above Saveas dialog should be popped up where user can choose the destination of file and file name.
I have tried "enabling the setting to check the save location in the download settings of the browser" and it works. But we do not want to depend on the Browser settings.
Please add your thoughts on below..
Instead of depending on the browser settings is there any other way to show Saveas dialog?
Are there any open source Nuget packages available to help on this?
NOTE: I am using .NET 6.0 for building my application
Thanks in advance,
Bhargavi Gowri.
I also wanted to bring up a window to save a file in which the user could select a folder. Before that, the system automatically saved to the Downloads folder.
As I understood, there was no such possibility before, but now it is possible thanks to this api: https://caniuse.com/native-filesystem-api.
I found this solution in the answer to this question: https://stackoverflow.com/a/70001920/16740180.
It's worth noting that I use Blazor WebAssembly and not a Blazor Server. And I do not know if it will work for you.
Unfortunately, this doesn't work for mobile devices right now, but it works fine for windows. I hope this helps someone.
This isn't a Blazor thing. In web browsers, files are downloaded from links using <a> tag in HTML using the download attribute. Just create a link to your file:
<a href="path_to_file" download>Save</a>
Save
The path must be on the same server, but blob and data links will work as well.
If you do not suggest a name, the browser will use the original filename (possibly changed to remove symbols the OS doesn't allow in file paths).
https://caniuse.com/download
If you want your link to look like a button, then that's a different issue, and you can google or ask that.

Instruct browser to make user select location for downloaded file?

Some browsers has the option to automatically save downloaded files to a folder, without prompting the user where to save the file. This has posed a problem for us where the user automatically saves the file in "Downloads" instead of selecting a proper location.
Is there any HTML-attribute, HTTP-header or JavaScript solution to instruct browsers to prompt for save location for downloaded files even though they are configured otherwise?
Note: I am well aware that this is probably not possible, but wanted to see if someone hopefully can prove me wrong.
Related issues:
How to make browser download link target instead of navigate: Force to open "Save As..." popup open at text link click for pdf in HTML
No. It's a browser preference. If the user prefers not to be bothered by their browser for download locations, then that's their prerogative. They'll deal with the file location after it has been downloaded. A server cannot influence that behaviour.

How to force a Download File prompt instead of displaying it in-browser with HTML?

Download
If I click Download button, this target blank is opening a new window.
But I need it to prompt a dialog for saving this file. How can I achieve this?
This is something that you cannot absolutely control with HTML itself.
If the user is having a browser with PDF reading capabilities (or a plugin) and the corresponding settings to open PDF files in-browser, the PDF will open like that.
The PDF opens in a new tab simple because of your target="_blank", which has nothing to do with a download prompt.
If you are using HTML5 you can use the download attribute:
Download
If you have a back-end service which you can control or you feel like fiddling with your Web Server, you can always look for setting the right Content-Disposition. See this SO question for some nice discussion on Content-Disposition.

Files With Extension "doc" Must Show in Browser Instead of Download

I have uploaded a doc file on my server and when i open this file by it's url then it's automatically downloaded but i want that this should open in a browser instead of downloading,please help me to resolve this issue.
If you want open your document inside Browser, you can try the following settings:
The setting that controls this behavior is located in Windows Explorer (not Internet Explorer) on the user's machine.
Open “Windows Explorer”.
Select Tools -> Folder Options... from the menu.
Go to the “File Types” tab.
In the “Registered file types list”, select the file you want to change the setting for (e.g. DOC).
Click the “Advanced” button to open the Edit File Type dialog.
There is a checkbox, Browse in same window, where you can specify whether the selected file type should be opened within the browser or launched in its host application when clicked on a web page.
For more information, please refer to: http://support.microsoft.com/?scid=kb;en-us;162059
Have you tried to use the page view web part and link to the document?
Also, does it have to be a word document? Could you try a different approach for the content, like using one of the page layouts or the content editor web part?

HTML: Form upload, only allow PNG, GIF & JPG

I have a form file upload. When the users goes to upload an image, it displays all files on their computer. How can I make the HTML upload dialog window to only display JPG, GIF and PNGs?
Just add accept to input with file types. This will filter the list of displayed files, but not create ban on download other files. This is convenient, because it is simple.
The file upload dialog in the web browser is outside of your control. You could create a Java applet for uploading images, like Facebook did.
As this hasn't been answered yet; add the following code to your file input
accept="image/x-png,image/gif,image/jpeg"