My application basically converts images. When uploading an image, it is processed at the server and the server sends the result back as an attachment, which results in an immediate download.
It already works with a plain HTML form, such as
<form action="/icon" method="post" enctype="multipart/form-data">
<input type="file" name="image"/>
<input type="submit" value="Create"/>
</form>
The server responds with header Content-Disposition=attachment; filename=\"processed.zip\" etc.
Of course, the stock <input type="file"...> has a very ugly look and I'd like to give it a different styling. Additionally, in order to improve user experience, I'd like to support drag & drop for file upload.
However, all file upload frameworks or just plain JavaScript based drag & drop only supports "AJAX"-like uploads (using XMLHTTPRequest). Then, however, the immediate download doesn't work.
Is there any way, a trick, a solution for this?
Until now I found only the following solution. It involves a JavaScript framework, Dropzone.js, but would work with any other JavaScript implementation.
Handle drag & drop and upload with JavaScript
Server returns the zip file in Base64 encoding
Create a data: URI
Create with JavaScript create a temporary <a> element and perform a click event (as described in this StackOverflow answer)
This solution only works, because the result is smaller than 32 KB. In Google Chrome and Firefox, the download even has an adequate filename. In Safari unfortunately it doesn't work.
Related
i have a piece of code that let's the user see find a file how do i get it to display where it is save eg desktop/folder/file.
my current code is a basic file input that goes like
<input type="file"/>
i want my page to display where the file is saved also on a side not is there a way to display search file results. I look up programing work and my page will show everything that is programing work in its name.
i have not tried anything as i am unsure where to start.
I'm pretty sure you want to get the full file path of a file uploaded via an HTML input element, if not, let me know.
If so, such behavior is intentionally blocked by most browsers, except for firefox. See How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?. If you want to raed the file, you can use the FileReader class. Alternatively, you can make an object URL to the file object, on the onchange event, simply
var url = URL.createObjectURL(event.target.files[0]);
to use for reading purposes.
I have the following problem, I want to create a HTML input field, where a user can upload a .p7m file and if he clicks on it, he should only see files of that type, but it does not work properly.
To change the displayed files, I usually change the "accept" attribute as seen in the example below.
<input class="uploadFile" name="file" type="file" id="file" placeholder="Your P7M..." accept="application/pkcs7-mime" >
What bothers me, is that I don't get the correct files shown for the values I choose in Firefox 60.4.0esr (64-Bit) on Windows 10:
"application/pkcs7-mime" -> Only shows .p7c Files
"application/x-pkcs7-mime" -> Shows all files
Google Chrome shows .p7m files as well on the same machine.
Browsers use a combination of their own data and the OS data for MIME type <-> file extension mapping.
Chrome apparently has hardcoded mappings for "application/pkcs7-mime", which are used when the OS doesn't provide info on the MIME type.
Firefox does not, so I think in your case it shows the extensions configured in the OS. (If anyone's curious, here's the entry point, the hardcoded values and the code that queries the OS on Windows.) Check what's in HKEY_CLASSES_ROOT\MIME\Database\Content Type\application/pkcs7-mime on your system.
I don't think you can control this from a web page.
Hopefully someone will be able to assist.
I am creating an online submission form in HTML, with the ability to add upload an attachment. The resulting data ends up in a Notes / Domino database.
I have managed to get the HTML form working, with the upload button. However, when viewing the received data, instead of having an attachment in the rich text field of the Notes form, I end up with the contents of the attachment. This is fine where it is a text document. However, when it is a Word / Excel doc, it ends up as a load of gibberish.
Can anyone suggest what is wrong ?
Here is my code :
<form method="post" enctype="multipart/form-data" action="/webquote.nsf/gendoc?createdocument" >
Attachment: <Input Type="file" NAME="Attachments" MAXLENGTH=50 ALLOW="text/*" >
Thanks,
Simon
Here are two lines of code from a production database I built a while ago:
<form name="SubmissionForm" id="SubmissionForm" action="/<Computed Value>/AgencySubmission?CreateDocument" method="post" enctype="multipart/form-data">
<input type="file" name="%%File.1">
It works for me. It may not be exactly what you look for, the file is not attached into a Rich Text field, but you can always detach are re-attach it on the server after submission.
I have also built file uploads using jQuery and Ajax, so the page does not have to be reloaded.
The prefered way for this kind of stuff nowadays would be to directly design an xPage. Does that seem doable, or do you have some constraints, like the HTML being designed somewhere else and the integration with Domino later, almost at last resort ?
From the look of your <input> it would look like we are in the later situation.
What's with the "allow" attribute ? I can't find any reference. Did you mean "accept" ? And what about the value of "text/*" ? This could be the source of the giberish, as the browser and/or Domino would interpret the input as text rather than a blob. A value of "multipart/form-data" would perhaps be more appropriate, but no "allow" or "accept" attribute at all works fine too.
For some reasons, Domino being Domino, the "name" attribute of your <input> element must be "%%File.1", in short simply
<input type="file" name="%%File.1">
Your <form> element is spot on.
The last thing to worry about is that your Domino server will see the file comming out of seemingly nowhere and balk with an error 500 "HTTP Web Server: File Upload Not Allowed Exception". You'll need to talk to your Domino admin and have him set the following parameter in the server's notes.ini :
DominoDisableFileUploadChecks=1
Then you're all set.
Hope this helps.
Create a Notes Form (a Form design element), add a File Upload control.
Add a Web Query Save agent (see Form design ouline).
In that agent, get the NotesDocument notessession.documentContext
This will contain the content of your uploaded file, and any other field son your Form, split into Notes items.
You can get the attached file with notesdocument.embeddedobjects to locate all attachments, and/or notesdocument.getAttachment (if you know the filename).
That's perhaps the oldskool way of doing it, but it's tried & tested, and what Domino is expecting you to do.
How can i limit my form to only accept jpeg files? Now it shows all files.
<input name="image" type="file" />
And are there any javascript method to show progress?
There is an accept attribute in the input tag, but it's not supported by all browsers. Here's an example:
<input type="file" name="image" id="image" accept="image/jpeg" />
It could be your first check, but your main check must be on the server when accepting the file.
How can i limit my form to only accept jpeg files
Mostly, you can't. You have to check at the server (which you need to do anyway, even if you can check at the client; you can never trust client-side validation, of anything). But things are improving. There is the new File API from the W3C coming down-the-pike, which you could use on browsers that support it (Mostly Firefox, at the moment; it was a Mozilla initiative), just for a better user experience for those with modern browsers.
Edit And Gert G points out that here's the accept attribute that can give a hint to the browser, which is nice for browsers that support it.
And are there any javascript method to show progress?
Not directly, no. It's sometimes possible to show progress indirectly, by using a timed series of ajax requests alongside the upload and having the server tell you how much it had received so far, but it's fraught with difficulty and probably not worth the bother.
This is another area where the file API could help, although you might find you introduced a fair bit of latency in the process: Basically, you could read a chunk of the file locally, send that to the server via ajax, update progress, read and send the next chunk, etc.
There are, of course, Flash uploaders like SWFUpload that show progress and such, if you want to use something proprietary (but incredibly widespread). (Flash, I mean.)
There is no pure html way to show certain file types, and there is no easy javascript way either.
I use a package called FancyUpload: http://digitarald.de/project/fancyupload/ which handles this part for me. Also, it will show the download progress bar as you've asked.
I should mention that the uploader I posted needs you to include a javascript framework called MooTools. There are other similar uploaders available if you prefer jQuery (such as uploadify) or another framework.
Please, make sure that you also check on the server side.
This can't be done in plain HTML/Javascript, but there are several Flash-based components that can do this - e.g. Uploadify comes to mind.
If you can live with this limitation, there's plenty of questions about this (with good answers) here on SO.
You can use <input name="image" type="file" accept="image/jpeg"> to limit the users choice. But you still need to check the file type in the server.
You can obviously not display progress without starting the upload, so you should be first looking for a server side api that keep the client updated on the state of the upload. As for javascirpt progress bars every javascript library has one e.g. jquery progress bar
<form>
<label for="attachment">Attachment:</label>
<input type="file" name="attachment" id="attachment">
<input type="submit">
</form>
I want to attach the file path to a form. I am doing it using the following code, but I want that the pop up window should open to a specified path, say D:\newfolder, so the user doesn't need to go to D: and then newfolder to attach the file.
Is there any way I can set this predefined path?
This can't be done in any browser for security reasons.
As far as I know, It's also not possible using a Flash-based uploader like SWFUpload.
You may be able to pre-set the path using an alternative Java-based uploader that has more liberal access to the client's computer, but this feature is hardly worth making the switch to that technology and the additional requirements and hassles it brings along.