Normal to upload file I do
<form method='post' enctype='multipart/form-data'>
<p><input type='text', name='name'/></p>
<p><input type='file', name='image'/></p>
<p><input type='submit', value='Wyślij'/></p>
</form>
What if I want send this form without page reload?
I can use "new FileReader()" and bind base64 to $scope but with big files it doesn't work well.
Can I upload my form without page reload in similar way like above?
I think you should looked at the directive which has been created already ng-file-upload
Features
Supports upload progress, cancel/abort upload while in progress, File drag and drop (html5), Directory drag and drop (webkit), CORS, PUT(html5)/POST methods.
Cross browser file upload (HTML5 and non-HTML5) with Flash polyfill FileAPI. Allows client side validation/modification before uploading the file
Direct upload to db services CouchDB, imgur, etc... with file's content type using $upload.http(). This enables progress event for angular http POST/PUT requests.
Seperate shim file, FileAPI files are loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support.
Lightweight using regular $http to upload (with shim for non-HTML5 browsers) so all angular $http features are available.
https://github.com/nervgh/angular-file-upload/ seems to handle large uploads very gracefully
Related
I want to retrieve some HTML content from the web (for example RSS feed), save it for offline use and then display it in a Web Browser control in a Windows Phone application. I can easily save the content as a string and use NavigateToString() method to display the HTML but what do I do with the images? I can download them and save them and even replace the src attribute of the img tags but how do I intercept the image loading in the web browser control and feed it images from the local database?
Well you will have problem with any asset, not only images (unless you're talking about HTML without any external javascript or CSS). You could possibly have a method to detect asset sources (<script src=""> or <img src=""> or <link href=""> are some obvious examples). Then you would download that asset as a local file. Then when you're displaying it, you would replace all assets in your HTML string with local copies instead.
I haven't worked on Windows Phone at all but I think your solution would be around these lines.
I ended parsing the HTML downloading the images and replacing the src attribute with the local file name. Then I saved the html in the local storage so that relative links continue to work. Sadly I did not find a way to store the content in the database because if I used NavigateToString to provide the HTML I cannot provide the image data.
In my project I want to update the csv file in Google app. At the same time I want to show the progressbar to the end user how can i do this.
Please help me if you have total code.
I'am using Serlvet, JSP and Google app in my project.
index.jsp:
<form action="<%= blobstoreService.createUploadUrl("/upload") %>" method="post" enctype="multipart/form-data" onsubmit="return validate()">
<input type='file'>.....
upload:
Map<String, BlobKey> blobs = blobstoreService.getUploadedBlobs(req);
BlobKey blobKey = blobs.get("myFile");
if (blobKey == null) {
res.sendRedirect("/");
} else {
res.sendRedirect("/serve?blob-key=" + blobKey.getKeyString());
}
I've had sucess in the past with this:
jQuery File Upload
File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
As the data transfer mechanism is a standard POST you should also be able to intergrate this.
I'm working on a web page that displays a pdf file that needs to be updatable via a (JSF) file upload. My question is, how can I set my webpage up so that this new uploaded file actually takes the place of the old one?
I have the file upload working so that an admin user can upload a different pdf file to replace the one currently displayed, sending the pdf to a folder in my tomcat server, with the same filename as the one previously displayed. I did this because I know you can't save the pdf to a resource file within the web application, as these are not dynamically loaded while the application is running. I am using the following HTML to display the pdf:
<object id="pdf" data="uploads/folder/replaceable.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a hRef="uploads/folder/replaceable.pdf" onClick="updatePDF();">click here to
download the PDF file.</a></p>
</object>
I've seen Uploaded image only available after refreshing the page and How I save and retrieve an image on my server in a java webapp and see that this can be accomplished using <Context> tag to retrieve the file similarly to how I have data="uploads/folder/replaceable.pdf", but I don't know anything about the <Context> tag and haven't been able to get this to work
I think the problem that you are having is that the browser is caching the PDF file, and even though there is a new file available on the server, the browser is not fetching it. In order to force the browser to fetch the latest version of the PDF file you need to set the expiration header in the HTTP response to a very short time. More information for setting this up in Tomcat can be found here. I believe this is a feature only available since Tomcat 7. For previous versions of Tomcat, you need to roll your own Servlet that modifies the response header, which you can easily find with a bit of googling.
To take a look at the actual HTTP response header, you can use the developer tool built into Chrome or Firebug with Firefox.
Here's the relevant entry in web.xml that you will need:
<!-- EXPIRES FILTER -->
<filter>
<filter-name>ExpiresFilter</filter-name>
<filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
<init-param>
<param-name>ExpiresByType application/pdf</param-name>
<param-value>access plus 1 minutes</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>ExpiresFilter</filter-name>
<url-pattern>uploads/folder/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
</filter-mapping>
Not sure if this will work, but I've done an asynchronous upload script using JQuery and Ajax that updates images on the run on a page. This might work with your scenario also.
The basic principle: Create an upload script with JQuery and Blueimp upload library: http://blueimp.github.com/jQuery-File-Upload/
Point the upload to a servlet, JSP page or the such that handles the upload. This page will store the file and what ever is needed, and then provide a callback with JSON or XML data back to the page where the upload was sent from, including the filename of the stored file. Then use JQuery to update the contents of your object on the JSF page.
Note that the filename should change for each upload; Otherwise the browser might try to fetch the old PDF file from cache and there is no change. I can't figure out how to go around this as I'm writing this, so you might need to do some more research on it.
For your convenience, I also wrote a blog post about it that might help you.
I want to upload multiple files from HTML form to S3 using S3 POST. Currently for uploading a single file(2.5MB) S3 POST took 2 mins to upload.
Is it possible to upload two files in parallel so that the total upload time to S3 is less.
You can use AJAX to do this. Basically, use an XMLHttpRequest for each upload, so you can start them both in parallel.
Unfortunately, this will only work on browsers that let you access File inputs from JavaScript -- I don't think IE supports this.
A framework like jQuery or ExtJS may help you work around browser weirdness. ExtJS does file uploads by creating hidden iframes and submitting the form to load in the iframe. That way, you can create multiple hidden iframes and do multiple uploads at once.
The only way I know to take the contents of a local file and push those bytes to a server is to set up a form post with an <input> of appropriate type to prompt the user to select a file.
I would like to do the same thing only pushing the data through XMLHttpRequest (no cross-scripting tricks).
Currently, we do this with an iframe to get the post behavior.
My sense is the iframe is the only solution, but I post here in case I've missed something.
You could use the JavaScript File API (available in Firefox 3.6 or later and latest versions of Chrome and Safari). Basically, you can add an event listener to the <input> tag that will fire when a user selects a file. Then, you can upload it using an XMLHttpRequest. Also, the File API can allow you to do other fancy stuff, such as drag-and-drop uploads, getting information about a file before it is sent to the server, and providing a progress bar as a file is uploading.More info: https://developer.mozilla.org/en/using_files_from_web_applications
This is not a good cross-browser solution because it doesn't have good support in all the popular browsers (Internet Explorer), but you could use feature detection in JavaScript to detect if the File API is available and revert back to your iframe method if it is not.