I've spent several hours of googling. Can anybody point me to an example of big file uploader with progress with backend on ASP.Net MVC3. I found many different solutions, but most of them use PHP as backend, and it's a bit hard for me to convert. Also I think there have to be some examples for ASP.Net MVC3.
PS I don't consider paid components, please don't suggest them.
Uploadify - there you have it :)
Set maxRequestLength in the web.config
http://midnightprogrammer.net/post/Upload-Files-In-RAZOR-With-jQuery-Uploadify-Plugin.aspx
You could try out Telerik Upload not sure what the file size limit is though.
This is a free and opensource component from Telerik.
I spent a good amount of time getting the right plugin too.
I use this :
http://valums.com/ajax-upload/
Uploadify uses flash to send files, which was bad for me as i needed upload from authenticated users ONLY. And flash would not send the cookies and so your application will treat the upload request as anonymous. If that is not an issue, uploadify works fine too.
Here is how i implemented it in mvc3 -
Create a controller / action to receive the opload file.
Change the 'action' property of the plugin to point to it -
// url of the server-side upload script, should be on the same domain
action: '/controller/action'
Make sure that action returns JSON object with a property in it with 'success' = 'true'/'false'
Related
I am new to spring and JSP. My web application is spring powered, which I run locally in apache tomcat.
In my JSP page I have multiple file-upload inputs and many text input fields.
Every time, when I press any of the upload buttons, a HTTP POST request goes to my controller from where on I may save the image to the database.
But, what I want is:
I will upload the images one by one ( preferably by staying in the page) but won't save them in database and then when I press submit to get the rest of the input text fields data, I commit all the data, including image, texts to the database in one try.
I have heard of scope="session" for my controller(bean) in the dispatcher-servlet.xml ... but I am unsure as to if I upload image to my controller and get back to my JSP form, will the bean keep my already uploaded images?
I think it is hard for me to explain, so please let me know if my question is not clear.
It would be nice if anybody can come up with a suggestion that may help to obtain my goal.
Are you uploading a varying number of images, as in if someone wants to upload only 2 they'll have 2 file fields on the form, or does everyone get 5 fields for example?
To be honest, the whole scheme of incremental upload sounds a bit overcomplicated at this stage. (Unless you have an explicit need to show progress bars on each upload, etc.) What if the user abandons the form after uploading the first image? You'd need a pretty solid mechanism to keep track of the entire visit, keeping it in the session wouldn't help here. Can a user pick up where they left off? If you make the whole thing work with single form submit click first, you can break it out and fine tune the process later. I mention that since you stated you're new to jsp and Spring (what's your experience with web dev otherwise?)
I think the best way is to upload file using ajax control rather than submitting form for each upload and store the file references in session scope variable(attribute). there are lot of libraries have ajax based file uploading like extJS, JQuery, GWT, DWR , whatever ajax library you are using in your web application.
I am developing a website using Microsoft MVC3, and have built it upon the default MVC3 Application template. It accesses an external database and works on localhost.
I have deployed it to a shared server I rent from storminternet via the publish tool using ftp method (storminternet do not yet support web deploy), and it runs well. It accesses the database okay and get requests work fine.
However, any form that submits via POST protocol returns page not found error 404 (this is on actions where I have asserted [HttpPost]).
Storm internet assure me that POST and GET are allowed by default, and since the helpdesk are not developers, I'm unsure who to turn to. I don't have an excellent understanding of web.config, although I can read and understand xml and see what's going on by reading through and googling. I have tried adding the protocols to the root web.config, and I think I might be barking up the wrong tree.
Has anyone else had this problem, or might anyone know how to help me?
To replicate my error, my site is here... 213.229.125.117/$sitepreview/ase-limited.com/Dev (sorry it isn't blue. The dollar gets parsed to % something)
and the quickest route to a POST request is to click 'Add Building' at the top of the left-hand side and then click 'Save' at the top of the dialogue box.
Any help will be gratefully received. I've been stuck on this for days without luck.
Best Regards
Nick
STOP-PRESS-STOP-PRESS-STOP-PRESS-STOP-PRESS-STOP-PRESS-STOP-PRESS-STOP-PRESS-
It turned out to be a known issue with sitepreview. Switching to the proper domain sorted everything.
I have noticed that you have some 404 javascript errors when performing your AJAX requests. For example you have a request to:
http://213.229.125.117/$sitepreview/ase-limited.com/BuildingManager/Employees/2
instead of:
http://213.229.125.117/$sitepreview/ase-limited.com/Dev/BuildingManager/Employees/2
Notice how /Dev is missing. That's because in your javascripts you have hardcoded your urls instead of using url helpers to generate them. For example you wrote something like this:
$.ajax({
url: '/BuildingManager/Employees/2',
....
});
which works fine on localhost because you don't have a virtual directory name but doesn't work when you deploy on your server because now the correct path is:
$.ajax({
url: '/Dev/BuildingManager/Employees/2',
....
});
For this reason you should absolutely never hardcode urls like that.
And when I try to POST the form in tries to post to http://213.229.125.117/Dev/BuildingManager/SaveBuilding which seems a very weird url as it is missing the whole beginning. Once again: never hardcode urls. Always use url helpers.
I need for users to upload files (mostly images) without leaving the current webpage. What's the best tool, library or mechanism for doing this? I'm using the latest jQuery and Spring webmvc (with JSP), so if there's already a mechanism within them then that's ideal.
It would also be really great to have some kind of progress bar. Does that mean it requires coordination with the server to read the progress (where Spring would have to come into play)? Or is there a mechanism within JavaScript for this?
You should check out Plupload.
Plupload offers a cross-browser
JavaScript File uploading API that
handles multiple file uploads,
client-side progress meters, type
filtering and even client-side image
resizing and drag-and-drop from the
desktop. It achieves all of this by
providing backends for Flash,
Silverlight, Google Gears, HTML5 and
Browserplus and picking the most
capable available option.
Its really neat! Here's a link to some of their Demos...
http://www.plupload.com/example_jquery_ui.php
... and a screenshot of the jQuery UI queue widget (it has a progress bar!):
I hope this helps.
Hristo
I use uploadify pretty regularly: http://www.uploadify.com/
However it does use flash for the upload mechanism and as a result may create some issues if the user is authenticated.
You should use AJAX on the client side
http://www.webtoolkit.info/ajax-file-upload.html This tutorial covers all client side.
Om the server side
This tutorlal covers most of this issue:
http://www.ioncannon.net/programming/975/spring-3-file-upload-example/
Yopu can use jquery as well or any other JS framework.
But the mist important thing is the fact You need to remember that your tag on client side should have.
enctype='multipart/form-data'
property. it means that your request contains muultipart data.
Uploadify does that trick > http://www.uploadify.com/
All samples are php but you should be able to convert it to your platform.
What do i need to do for putting ajax functionality to my project.
What tool kit do i need to download or how can i integrate that .
and do i really need to do something for putting update panel for my project?
One method for AJAX enabling your ASP sites is using the AJAX control toolkit (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/) which provides some AJAX functionality using ASP controls that should be familiar to a novice Dot Net developer. AJAX Control Toolkit is a DLL you add to your solution just like other controls. There is then markup for use in the ASP.NET pages.
For more customized and advanced AJAX features, your best bet is using JQuery (http://jquery.com/) and create *.asmx Web Services. JQuery includes a $.ajax() call that will communicate to ASP.NET Web Services using JSON. This SO page may help - Calling ASMX from jQuery and this Encosia blog entry may help - http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/. JQuery is a library of JavaScript files that you download, include in your page, and call into using your own JavaScript files.
I would also recommend that you read the wikipedia entry for AJAX (http://en.wikipedia.org/wiki/Ajax_(programming)) and familiarize yourself with the related technologies.
I think you need to provide a lot more information before we can give youa definitive answer.
Ajax is simply using Javascript to request a webpage - same as a user clicking on a link - except that JavaScript gets the contents of the page requested instead of showing it to the user.
This allows you to request data within JavaScript without refreshing the page.
As you mentioned UpdatePanel, I'm assuming you're using ASP.Net - In which case, .Net 2.0 didn't include AJAX and you needed to get some additional installs to make it work. 3.5 and later includes it natively.
If you're just starting to get into the whole area, I suggest you do some reading about how AJAX works behind the scenes before trying to use it - Understanding what its doing will save you a LOT of headaches later.
FWIW you don't actually need ANYTHING special to make AJAX work - you can write it yourself entirely in JavaScript (I've done this far too many times). As mentioned in Doug's answer, JQuery is fantastic and is worth using even without the AJAX functionality.
If, however, you want to use UpdatePanels and AJAX, the easiest option is .Net 3.5 or later (Visual Studio 2008 or later)
In my opinion, jQuery has the best AJAX functionality and is easy to learn and use. It's got great documentation and there are lots of tutorials and examples -- I love it.
I am creating one application in .net MVC, in which I am using jQuery AJAX to post some data to server. The data posting is working fine, but I also need to upload one image along with the data. I have searched on stack over flow for similar question but they are not able to help me. I donot want to use flash to upload file, pure jquery solution will help me.
Using some solution I tried to post to server, but on server side I am not getting file data.
Please can some body tell me how to implement file upload in jQuery ajax?
Thanks
Ashwani
I think you're out of luck if you want ajax like uploading without flash. Due to security limitations javascript can't do all the things required. Off the top of my head i'd say your only other option will be to use an iframe to make it appear as thought it was an ajax post.
Why not use flash though? YUI Uploader is amazingly simple and works great!