EzDevInfo.com

Preview an image before it is uploaded

I want to be able to preview a file (image) before it is uploaded. The preview action should be executed all in the browser without using Ajax to upload the image.

How can I do this?

Posting a File and Data to RESTful WebService as JSON

This is probably going to be a stupid question but I'm having one of those nights. In an application I am developing RESTful API and we want the client to send data as JSON. Part of this application requires the client to upload a file (usually an image) as well as information about the image.

I'm having a hard time tracking down how this happens in a single request. Is it possible to Base64 the file data into a JSON string? Am I going to need to perform 2 posts to the server? Should I not be using JSON for this?

As a side note, we're using Grails on the backend and these services are accessed by native mobile clients (iPhone, Android, etc), if any of that makes a difference.

How to upload files to server using JSP/Servlet?

How can I upload files to server using JSP/Servlet? I tried this:

<form action="upload" method="post">
    <input type="text" name="description" />
    <input type="file" name="file" />
    <input type="submit" />
</form>

However, I only get the file name, not the file content. When I add enctype="multipart/form-data" to the <form>, then request.getParameter() returns null.

During research I stumbled upon Apache Common FileUpload. I tried this:

FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items = upload.parseRequest(request); // This line is where it died.

Unfortunately, the servlet threw an exception without a clear message and cause. Here is the stacktrace:

SEVERE: Servlet.service() for servlet UploadServlet threw exception
javax.servlet.ServletException: Servlet execution threw an exception
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:313)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
    at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:852)
    at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
    at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
    at java.lang.Thread.run(Thread.java:637)

jQuery Ajax File Upload

Can I use the following jQuery code to perform file upload using post method of an Ajax request ?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

If it is possible, do I need to fill "data" part? Is it the correct way? I only post the file to the server side.

I have been Googling around, but what I found was a plugin while in my plan I do not want to use it. At least for the moment.

File Upload using AngularJS

Here is my HTML form:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

I want to upload an image from local machine and want to read the content of the uploaded file. All this I want to do using AngularJS.

When I try to print the value of $scope.file it comes as undefined.

Sending multipart/formdata with jQuery.ajax

I've got a problem sending a file to a serverside PHP-script using jQuery's ajax-function. It's possible to get the File-List with $('#fileinput').attr('files') but how is it possible to send this Data to the server? The resulting array ($_POST) on the serverside php-script is 0 (NULL) when using the file-input.

I know it is possible (though I didn't find any jQuery solutions until now, only Prototye code (http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html)).

This seems to be relatively new, so please do not mention file upload would be impossible via XHR/Ajax, because it's definitely working.

I need the functionality in Safari 5, FF and Chrome would be nice but are not essential.

My code for now is:

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

How does HTTP file upload work?

When I submit a simple form like this with a file attached:

<form enctype="multipart/form-data" action="http://localhost:3000/upload?upload_progress_id=12344" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>

How does it send the file internally? Is the file sent as part of the HTTP body as data? In the headers of this request, I don't see anything related to the name of the file.

I just would like the know the internal workings of the HTTP when sending a file.

Uploading images using Node.js, Express, and Mongoose

Please consider newer answers that have more up-to-date information as things have changed over the years!

Since many new Node.js libraries are quickly being rendered obsolete and there are relatively few examples anyways I want to ask about uploading images using the latest versions of Node.js (v0.4.1), Express (1.0.7), and Mongoose (1.1.0). How have others done it?

I've found: https://github.com/felixge/node-formidable, but I am new to uploading images in general so I want to learn general stuff and ways of doing so using Node.js and Express.

Which gets priority, maxRequestLength or maxAllowedContentLength?

While changing the maximum allowed file size for upload I stumbled on those two settings.

In the sytem.web you have the http runtime node with maxRequestLength. In the system.webServer you have the requestLimits with maxAllowedContentLength.

Now which gets the priority over the other? And do we need to set both or is the last one (the one for IIS7) enough?

Is there a good jQuery Drag-and-drop file upload plugin? [closed]

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this:

$j('#MyForm').enableDragDropUploads('.upload-area')

With the upload target being the action of the form.

Any solution must not prevent a regular file field from being usable (using traditional browse method).

I only need one file at a time, though of course having the option for multiple isn't a bad thing.

I've found a couple of drag-drop upload examples:
http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

But the code there isn't setup as a plugin. It's probably not too difficult to change it, but also no point doing so if someone else has already done that work and is simply evading my Google searches.

I'm ideally looking for a pure HTML5/jQuery solution.
A Google Gears one is acceptable, but a Flash solution is not.

HTML Input="file" Accept Attribute File Type (CSV)

I was hoping someone can help me out.

I have a file upload object on my page:

<input type="file" ID="fileSelect" />

with the following excel files on my desktop:

1. file1.xlsx
2. file1.xls
3. file.csv

I want the file upload to ONLY show .xlsx, .xls, & .csv files.

Using the accept attribute, I found these content-types took care of .xlsx & .xls extensions...

accept= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept= application/vnd.ms-excel (.XLS)

However, I cannot find the correct content-type for an Excel CSV file! Any suggestions?

EXAMPLE: http://jsfiddle.net/LzLcZ/

How to resolve the C:\fakepath?

<input type="file" id="file-id" name="file_name" onchange="theimage();">

This is my upload button.

<input type="text" name="file_path" id="file-path">

This is the text field where I have to show the full path of the file.

function theimage(){
 var filename = document.getElementById('file-id').value;
 document.getElementById('file-path').value = filename;
 alert(filename);
}

This is the JavaScript which solve my problem. But in the alert value gives me

C:\fakepath\test.csv 

and Mozilla gives me:

test.csv

But I want the local fully qualified file path. How to resolve this issue?

If this is due to browser security issue then what should be the alternate way to do this?

MVC 4 Razor File Upload

I am new to MVC 4 and I am trying to implement File Upload Control in my website. I am not able to find the mistake.I am getting a null value in my file.

Controller:

public class UploadController : BaseController
    {
        public ActionResult UploadDocument()
        {
            return View();
        }

       [HttpPost]
       public ActionResult Upload(HttpPostedFileBase file)
       {
           if (file != null && file.ContentLength > 0)
           {
               var fileName = Path.GetFileName(file.FileName);
               var path = Path.Combine(Server.MapPath("~/Images/"), fileName);
               file.SaveAs(path);
           }

           return RedirectToAction("UploadDocument");
        }
    }

View:

@using (Html.BeginForm("Upload", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
    <input type="file" name="FileUpload" />
    <input type="submit" name="Submit" id="Submit" value="Upload" />
}

javascript file upload size validation

Is there any way to check file size before uploading it using javascript.

How to have jQuery restrict file types on upload?

I would like to have jQuery limit a file upload field to only jpg/jpeg, png, and gif. I am doing backend checking with PHP already. I am running my submit button through a JavaScript function already so I really just need to know how to check for the file types before submit or alert.