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.
Related
I am working on a React project like a social media app where users can upload images or videos. I am using Firebase storage to store the image and videos.
I can able to accomplish image uploading by using React react-firebase-file-uploader package but as I am new to web development, I am struggling to find the solution for uploading videos for React.
I have searched the internet but I couldn't find a proper solution to accomplish these tasks.
I required to upload only video/videos and want to preview it/them before uploading data to Firebase storage.
I need to compress the video to reduce the file size before uploading or after uploading to Firebase storage using cloud functions.
May be is worth stating again that video files are compressed by default. If something, you can resize the file so that it has less resolution, or process it to add a watermark.
Here is an answer that discribes how to resize a video file. And here is a tutorial on how to use moviepy on Cloud Functions.
You should have a look at this tutorial here and this gist there
You may be able to do some treatment with Cloud Functions after the upload but beware that memory and execution time are restricted and your script may fail on large files.
you can try this
<input type = "file"
onChange = {
(e) => {
let videoObj = e.currentTarget.files[0];
// console.log(videoObj)
let {
name,
size,
type
} = videoObj;
size = size / 1000000
//for not uploading the file more than 10 MB
if (size > 10) {
alert("please upload file less than 10 MB");
return;
}
//code for only uploading the video
type = type.split("/")[0];
if (type != "video") {
alert("please upload video only");
return;
}
}
}
/>
I'm a new one in angular and ionic and writing test application. I'm trying to implement something like "PhoneBook". I've added some default data with images (avatar) and want to realize adding new contact right now. The problem is I don't know how to save a new image to application folder (I don't have any server). Specify, I contain my json data in local browser storage and there is one field which contains name of image. In my view I do as follow:
<ion-item class="item item-avatar item-remove-animate" ng-repeat="contact in contactIndexCtrl.contacts | filter: contactIndexCtrl.search track by contact.id"
ui-sref="root.contact-detail(::{ id: contact.id })">
<img ng-src="./img/{{::contact.pic}}">
...
</ion-item>
So the question is how to upload new images to img folder?
You can't save files to the img/ directory inside the project. You can understand why reading about how cordova apps work.
Your options are:
Save the image as a binary or Base64 into Storage, for that you can use LocalStorage (10mb limit, so not a good option), or a SQLite dataBase (Alternativelly there are some DB implementations other than SQLite ngCordova plugin such as LocalForage ou CouchDB)
Save the image to your app sdCard directory using Cordova FilePlugin
Here are some references so you can take a look and decide which is good for you. For your case I wold go with Base64 storage to SQLite DB
https://dbwriteups.wordpress.com/2015/09/19/saving-images-to-app-storage-in-ionic-using-ngcordova/
https://github.com/mozilla/localForage
https://devdactic.com/complete-image-guide-ionic/
http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/
https://github.com/mozilla/localForage
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
I've got a client with a D7 site in which all content is created by a single employee who knows html and css, but never accesses the back end. Is there a way to let them upload images to embed in content (not a field) without installing an html editor? No styles are used or needed. The images are created just as they need to use them.
Have you already looked at the IMCE module?
IMCE is an image/file uploader and browser that supports personal directories and quota.
https://drupal.org/project/imce
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.