- FAQ -


Basic setup
  • What do I need to run JFileUpload Pure HTML?
    You need HTML5 browser compatible such as Firefox, Chrome, Microsoft Edge, Internet Explorer, Safari or Opera.
  • How to setup JFileUpload Pure HTML?
    Copy css/, img/ and js/ folders on your web server and setup some parameters under index.html.
  • How to setup JFileUpload width and height?
    Width can be modified in DIV style including JFileUpload. Height can be modified under css/styles.css file:

<!-- width -->
<div id="jfucontainer" style="width:500px;">
  <!-- UI will be inserted here automatically -->
</div>

<!-- height in styles.css -->
.jbufilepanelcontainer {
    background-color: #F2F2F2;
    background: #F2F2F2 url("../img/cloud.png") no-repeat;
    background-position: 50% 50%;
    border: solid 1px #C1C3C5;
    height: 240px;
}

  • Why do I need a server-side script too?
    JFileUpload Pure HTML is just a client-side component that could upload files or folders to a server. You need a server-side script to handle upload request and store uploaded files.
  • For HTTP, can I use PHP, ASP.NET or JSP  as server-side script?
    Yes, files are uploaded through standard HTTP multipart requests. Your server-side script could be written in PHP, JSP, ASP.NET, ASP, CGI/Perl, CGI/C++, Ruby, ColdFusion ...
  • Where can I find server-side scripts to handle upload request?
    We process some free example of such upload script (PHP, JSP, ASP.NET and more) in add-ons section.
  • How to re-create folders structure on server-side when uploading a folder with multiples files and subfolders?
    First, you have to enable the recursive depth through "folderdepth" parameter of JFileUpload. Second, you need to enable "relativefilename" extra parameter to pass relative path in addition to file name:

folderdepth : -1,
param2 : "relativefilename",
value2 : "true"

After upload
  • How to redirect to an URL after upload completed?
    Use "forward" parameter such as forward=http://company.com/another.html
    If you need to redirect to a given frame of window then use "forwardtarget".
    If you need to append uploaded filenames to redirect URL then set "forwardparameters" to true.
  • Is it possible pass a HTTP POST request after upload completed?
    Yes, see "post" and "postparameters". It allows JFileUpload to send a HTTP POST request with uploaded filenames (and path). It could be useful if you need to send an email, store a status in database, ... after upload. For instance, post=http://company.com/postscript.php
  • What happen to the response of the HTTP POST?
    Response of "post" url is discarded by JFileUpload.
  • Could both "post" and "forward" parameters work together?
    Yes, "forward" will be processed after "post". It means that HTTP POST request will be sent prior to HTTP GET matching to URL redirection. To be more precise :
    1 - JFileUpload: Send HTTP POST  ----> Server : Process POST request.
    2 - JFileUpload: Discard response  <---- Server : Send response.
    3 - JFileUpload: Send HTTP GET    ----> Server : Process GET request.
    4 - Browser: Display HTML response <---- Server : Send response.
  • Can I pass additional parameter to "forward" parameter?
    Yes, try forward="http://company.com/another.html?custom=something"
  • How "forwardparameters" work if I upload many files?
    Depending on browser, URL size is limited (from 256 to 4000 characters) so the generated URL might be too long (http://company.com/another.html?filename1=...)
    if you upload more than 100 files. The solution is to use "post" and "postparameters" to get all filenames (because there is no limitation in POST size) and use "forward" parameter only to redirect.
Internationalization
  • How to modify JFileUpload resources (messages, menu, errors ...)?
    Most JFileUpload resources can be modified. A resource dictionary is available on file uploader variable. You can display this dictionary and update any resources. For instance:

...
var jfu = new JFU("jfucontainer", params);
...
// Update some resources before initialization such as UI
jfu.i18n.resources["containerempty.welcome.label"] = "Drag and drop<br>your files here<br><br>or<br>add files";
...


Security
  • Does JFileUpload support HTTPS ?
    Yes, it does. url parameter must start with "https://...".
  • Could JFileUpload work with a proxy?
    Yes, JFileUpload will use proxy setup in your browser.
  • How to pass login/password for Basic authentication protected upload script?
    Use username and password parameter. However, notice that there is no secure way to pass such credentials in JavaScript. You can encode or encrypt the string with your custom code to hide it but any advanced developer will be able to catch it. You should have both HTML page with file uploader and upload script in a secure path to avoid this situation.
Control filenames
  • How to allow some file extension only?
    Use whitelist parameter. You can pass any regular expression to filter allowed filename based on pattern. For instance for document files:

whitelist : "\\.(doc|docx|pdf|rtf|txt|ppt|pptx|xls|xlsx)$"

  • How to rename file before upload?
    Use template parameter. You can pass any regular expression to modify filename based on pattern. For instance to replace any non-ASCII parameter by "_":

template : "[^a-zA-Z0-9_\\.-]"
templatereplace : "_"

Large upload
  • How to upload files > 2GB through HTTP?
    You have to enable "chunksize" parameter on JFileUpload. Chunksize must be under 2GB (for 256MB, chunksize=268435456). Here is how JFileUpload works:
        1 - Split file to upload (on-fly) in chunks.
        2 - Upload each chunk with chunk detail in Content-Range HTTP header.
             (with additionnal chunkid, chunkamount, chunkbase HTTP parameters).
        3 - Server-side script recompose (on-fly) final file from received chunks.
Resume
  • How JFileUpload could resume broken uploads?
    Uncomplete upload could occur on system/network failure or simply because end-user cancelled upload. JFileUpload can resume uncomplete uploads. Use "resume" parameter to enable this feature. JFileUpload sends an additional HEAD request to server to know if current upload should be resumed. If you're interested in knowing how it works then see details below:
     1 - JFileUpload sends HEAD request with "filename" header for current upload.
     2 - Server script must return "HTTP 404 not found" response if file does not
          exist or "HTTP 200 OK" response with file size in a "size" header if file exists.
     3 - If remote file size < local file size then JFileUpload sends HTTP multipart POST
          request with "Content-Range" header including resume bytes index.
     4 - Server script handles upload request and append data to remote file.
Amazon S3
  • How to configure JFileUpload to upload to Amazon S3 bucket?
    S3 HTTP POST upload add-on is available. See documentation. Basically:
    1 - Enable s3upload in add-ons parameter.

    addons : ["s3upload"]

    2 - Generate a S3 post policy for your bucket and configure related parameters:

    param2 : "AWSAccessKeyId",
    value2 : "YOURAWSKEYID",          
    param3 : "Policy",
    value3 : "AWSPOLICYGENERATED",
    param4 : "Signature",
    value4 : "AWSSIGNATUREGENERATED",

    3 - Make sure CORS is enabled for your bucket.
    Notice that resume, overwrite and chunksize parameters does not apply because they're not supported by S3.