File upload guide

Modes of payment

5.1

Application for payment

5.1.1

The assertion of a claim for payment is predicated on the User’s submission of an application for payment to ul, containing such details as are necessary to enable ul to review the fulfilment of prerequisites of the payment and to facilitate the payment.

5.1.2

ul is entitled to determine in its free discretion how payment shall be effected. In particular ul is entitled to stipulate that payment shall be made by specified methods of payment. The User shall notify ul in his or her application for payment which of the payment methods offered by ul he or she is selecting.

5.1.3

The User is only entitled to submit an application for payment where the User has accumulated a minimum credit balance. The amount of the minimum credit balance is governed by the payment method selected by the User in his or her application for payment.

5.1.4

ul shall commence its provision of the contract services immediately after the parties’ contract is concluded. The User shall have no claim whatsoever for a refund of any fees. All orders shall be deemed final. If you are unsatisfied, please contact our customer support with respect to compensation.

5.2

Payment

5.2.1

ul shall immediately review the User’s application for payment. ul’s review shall also include a review of the User’s compliance with ul’s TOS. ul shall prepare a statement of account for each application for payment submitted by a registered User. Where, following ul’s review, ul determines that there are no obstacles to payment, ul shall timely pay the amount determined upon completion of its review (where possible within 30 business days) by such method of payment as the User has selected.

5.2.2

Where the User so requests and it is necessary for tax reasons, ul shall generate a receipt which comports with the requirements of tax law for each payment to the User.

Complete Upload File PHP Script

The complete «upload.php» file now looks like this:

<?php$target_dir = «uploads/»;$target_file = $target_dir . basename($_FILES);$uploadOk = 1;$imageFileType =
strtolower(pathinfo($target_file,PATHINFO_EXTENSION));// Check if image file is a actual image or fake imageif(isset($_POST)) {  $check = getimagesize($_FILES);  if($check !== false) {    echo «File is an image — » . $check . «.»;
    $uploadOk = 1;  } else {    echo «File is not an image.»;
    $uploadOk = 0;  }}// Check if file already existsif (file_exists($target_file)) {
  echo «Sorry, file already exists.»;  $uploadOk = 0;}
// Check file sizeif ($_FILES > 500000) {  echo «Sorry, your file is too large.»;  $uploadOk = 0;
}// Allow certain file formatsif($imageFileType != «jpg» && $imageFileType != «png» && $imageFileType != «jpeg»&& $imageFileType != «gif» ) {  echo «Sorry, only JPG, JPEG, PNG & GIF files are allowed.»;  $uploadOk = 0;}// Check if $uploadOk is set to 0 by an errorif ($uploadOk == 0) {  echo «Sorry, your file was not uploaded.»;// if everything is ok, try to upload file} else {
  if (move_uploaded_file($_FILES, $target_file)) {
    echo «The file «. htmlspecialchars( basename( $_FILES)).
» has been uploaded.»;
  } else {    echo «Sorry, there was an error uploading your file.»;
  }}?>

Usage

Styles:

Include the jquery.filer css file in your html page.

<link href="./css/jquery.filer.css" type="text/css" rel="stylesheet" />
<link href="./css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />

Javascript:

Include the jQuery library and jquery.filer script file in your html page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/jquery.filer.min.js"></script>

Create link elements whose href attributes will contain the path of the element you wish to open within the iLightbox.

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" id="input_file" multiple="multiple">
    <input type="submit">
</form>

The plugin is named «filer» and can be applied to any element. You will probably also specify some options while applying the plugin.

$(document).ready(function() {
	$('#input_file').filer({
        limit: null,
        maxSize: null,
        extensions: null,
        changeInput: true,
        showThumbs: true,
        appendTo: null,
        theme: "default",
        templates: {
            box: '<ul class="jFiler-item-list"></ul>',
            item: '<li class="jFiler-item">\
                        <div class="jFiler-item-container">\
                            <div class="jFiler-item-inner">\
                                <div class="jFiler-item-thumb">\
                                    <div class="jFiler-item-status"></div>\
                                    <div class="jFiler-item-info">\
                                        <span class="jFiler-item-title"><b title="`fi-name`">{{fi-name | limitTo: 25}}</b></span>\
                                    </div>\
                                    `fi-image`\
                                </div>\
                                <div class="jFiler-item-assets jFiler-row">\
                                    <ul class="list-inline pull-left">\
                                        <li>`fi-progressBar`</li>\
                                    </ul>\
                                    <ul class="list-inline pull-right">\
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                    </ul>\
                                </div>\
                            </div>\
                        </div>\
                    </li>',
            itemAppend: '<li class="jFiler-item">\
                        <div class="jFiler-item-container">\
                            <div class="jFiler-item-inner">\
                                <div class="jFiler-item-thumb">\
                                    <div class="jFiler-item-status"></div>\
                                    <div class="jFiler-item-info">\
                                        <span class="jFiler-item-title"><b title="`fi-name`">{{fi-name | limitTo: 25}}</b></span>\
                                    </div>\
                                    `fi-image`\
                                </div>\
                                <div class="jFiler-item-assets jFiler-row">\
                                    <ul class="list-inline pull-left">\
                                        <span class="jFiler-item-others">`fi-icon` `fi-size2`</span>\
                                    </ul>\
                                    <ul class="list-inline pull-right">\
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                    </ul>\
                                </div>\
                            </div>\
                        </div>\
                    </li>',
            progressBar: '<div class="bar"></div>',
            itemAppendToEnd: false,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-item-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action',
            }
        },
        uploadFile: {
            url: "upload.php",
            data: {},
            type: 'POST',
            enctype: 'multipart/form-data',
            beforeSend: function(){},
            success: function(data, el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            error: function(el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            statusCode: {},
            onProgress: function(){},
        },
        dragDrop: {
            dragEnter: null,
            dragLeave: null,
            drop: null,
        },
        addMore: true,
        clipBoardPaste: true,
        excludeName: null,
        beforeShow: function(){return true},
        onSelect: function(){},
        afterShow: function(){},
        onRemove: function(){},
        onEmpty: function(){},
        captions: {
            button: "Choose Files",
            feedback: "Choose files To Upload",
            feedback2: "files were chosen",
            drop: "Drop file here to Upload",
            removeConfirmation: "Are you sure you want to remove this file?",
            errors: {
                filesLimit: "Only `fi-limit` files are allowed to be uploaded.",
                filesType: "Only Images are allowed to be uploaded.",
                filesSize: "`fi-name` is too large! Please upload file up to `fi-maxSize` MB.",
                filesSizeAll: "Files you've choosed are too large! Please upload files up to `fi-maxSize` MB."
            }
        }
    });
});

General services of ul

2.1

ul offers its Users access to its Service. ul is entitled to permit access to certain services only to registered Users.

2.2

ul shall endeavour to keep the Service available 24 hours a day, seven days a week. Users shall have no entitlement to uninterrupted availability of the Service. In particular, ul reserves the right to impose temporary restrictions on its contractual services in view of measures it needs to take for operational or security reasons (in particular for preventive maintenance). ul shall endeavour to provide reasonable prior notice of such measures, to the extent that they are planned, and in all other respects it shall restore availability within a timeframe that is reasonable in view of the cause of disruption. To the extent that ul’s Service should not be available, this shall not give rise to any claims by Users for warranty or compensatory damages or reimbursement of expenditures.

2.3

In the event of interruptions to availability, it is possible that — in exceptional cases — it may not be possible to record/log a small number of queries. Should this occur, this shall not give rise to any claims by Users against ul for deficiencies of the services (warranty) or compensatory damages or reimbursement of expenses.

2.4

To the extent and for so long as an event of force majeure is present, ul shall have no obligation to perform its services. In particular, force majeure shall be deemed to include strikes, lock-outs, delays to or failure of supplies by suppliers, where such are caused by an event of force majeure, electrical power outages and disruptions to or destruction of data transmission lines lying outside of the scope of ul’s responsibility, orders or dispositions by public authorities or courts, attacks by Users or third parties (e.g. by malicious scripts such as computer viruses or DoS attacks) that ul would not have been in a position to prevent, even in the exercise of such care as is reasonable in the circumstances. Circumstances shall not preclude the presence of a force majeure event merely because ul is, as a general matter, obliged to carry out certain security measures.

2.5

ul is entitled to make changes to its Service in terms of content and design. In particular, ul is entitled to make further developments to the Service to maintain or improve its services, and to adapt it to current technical developments.

Options

• queue: (boolean) Files will upload one by one.

• auto: (boolean) Files will start uploading right after they are added.
  If using the system this option means the will start automatically after the first file is added.

  Setting this to will require you to manually start the uploads using the API .

• dnd: (boolean) Enables Drag and Drop.

• hookDocument: (boolean) Disables dropping files on $(document).

  This is necessary to prevent the Browser from redirecting when dropping files.

  The only reason why you may want to disable it is when using multiple instances of the plugin. If that’s the case you only need to use it once.

• multiple: (boolean) Allows the user to select or drop multiple files at the same time.

• url: (string) Server URL to handle file uploads (backend logic).

• method: (string) HTTP method used by the upload request.

• extraData: (object/function) Collection of parameters to add in the upload request.

  // Example
  extraData: {
     "galleryid": 666
  }

  If you need a dynamic value this can be set as a . Also, if this function returns nothing will be added.

  // Example
  extraData: function() {
     return {
       "galleryid": $('#gallery').val()
     };
  }

• headers: (object) Collection of headers to send in the upload request.

  // Example
  headers: {
     'X-CSRF-TOKEN': $('meta').attr('content')
  }

• dataType: (string) Response type of the upload request.

  Default is which means jQuery will try to ‘guess’ depending of what the server returns.

  Other values can be: , , , or

• fieldName: (string) Field name in the upload request where we ‘attach’ the file.

  // For example in PHP if using the default value you can access the file by using:
  var_dump($_FILES);
  // 'file' correspond to the value of this option.

• maxFileSize: (integer) File validation: Max file size in bytes. Zero means no limit.

  maxFileSize: 3000000 // 3 Megs

• allowedTypes: (string) File validation: Regular expression to match file mime-type.

  allowedTypes: "image/*"

• extFilter: (array) File validation: Array of allowed extensions.

  extFilter: "jpg", "jpeg", "png", "gif"

API

Exposed command in a nutshell:

cySubject.attachFile(fixture, processingOpts);

is a string path (or object with same purpose) that represents your local fixture file and contains following properties:

• {String} – file path (with extension)
• {String} — (optional) the name of the file to be attached, this allows to override the name provided by
• {Blob} — (optional) the binary content of the file to be attached

(optional) contains following properties:

• {String} – target (aka subject) element kind: component or plain HTML element. Defaults to
• {Boolean} — (optional) when true, do not throw an error if is zero length. Defaults to

Formstone

Formstone is unique to our list in a way that it’s actually a multitude of products within a single project. But, Formstone does have an Upload component that’s a very usable and very functional file upload management solution. They offer this solution for websites and apps, both small and large. The lightweight component features a simple drag&drop interface (with click interaction) that lets you upload single or multiple files with a lightweight progress bar attached. It’s a very effective solution for websites that are looking for extra components without the heavy fat attached to them. But also, Formstone is a project within itself. You can stitch together the other few dozens of components and create a web or app project out of that. Learn more about Formstone to fully understand the interaction between the variety of components they have to offer.

Download

Flow.js

Let’s keep the flow of our file uploader scripts going, with another great resource called Flow.js! Flow.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. Library does not require third party dependencies. It features capabilities like pausing and resuming file uploads, to recover lost uploads, and to handle errors within the uploader. It has a drag and drop file uploading solution, ability to upload WHOLE folders, and file preview for image files. Also, it has progress bars to keep you in check about the progress of the file’s you are uploading. Chunk uploads to make sure that you can recover any lost pieces from uploads that have failed, and instead resume them from that point to save time, and headache.

Download

CORS

To support CORS upload your server needs to allow cross domain requests. You can achieve that by having a filter or interceptor on your upload file server to add CORS headers to the response similar to this:
(sample java code)

httpResp.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS");
httpResp.setHeader("Access-Control-Allow-Origin", "your.other.server.com");
httpResp.setHeader("Access-Control-Allow-Headers", "Content-Type"));

<cross-domain-policy>
  <site-control permitted-cross-domain-policies="all"/>
  <allow-access-from domain="angular-file-upload.appspot.com"/>
  <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

Amazon AWS S3 Upload

For Amazon authentication version 4

Upload.upload({
    url: 'https://angular-file-upload.s3.amazonaws.com/', //S3 upload url including bucket name
    method: 'POST',
    data: {
        key: file.name, // the key to store the file on S3, could be file name or customized
        AWSAccessKeyId: <YOUR AWS AccessKey Id>,
        acl: 'private', // sets the access to the uploaded file in the bucket: private, public-read, ...
        policy: $scope.policy, // base64-encoded json policy (see article below)
        signature: $scope.signature, // base64-encoded signature based on policy string (see article below)
        "Content-Type": file.type != '' ? file.type : 'application/octet-stream', // content type of the file (NotEmpty)
        filename: file.name, // this is needed for Flash polyfill IE8-9
        file: file
    }
});

{
    "expiration": "2020-01-01T00:00:00Z",
    "conditions": 
        {"bucket": "angular-file-upload"},
        "starts-with", "$key", "",
        {"acl": "private"},
        "starts-with", "$Content-Type", "",
        "starts-with", "$filename", "",
        "content-length-range", , 524288000
    
}

Make sure that you provide upload and CORS post to your bucket at AWS -> S3 -> bucket name -> Properties -> Edit bucket policy and Edit CORS Configuration. Samples of these two files:

{
  "Version": "2012-10-17",
  "Statement": 
    {
      "Sid": "UploadFile",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::xxxx:user/xxx"
      },
      "Action": 
        "s3:GetObject",
        "s3:PutObject"
      ,
      "Resource": "arn:aws:s3:::angular-file-upload/*"
    },
    {
      "Sid": "crossdomainAccess",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::angular-file-upload/crossdomain.xml"
    }
  
}

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://angular-file-upload.appspot.com</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

For IE8-9 flash polyfill you need to have a file at the root of you S3 bucket. Make sure the content-type of crossdomain.xml is text/xml and you provide read access to this file in your bucket policy.

You can also have a look at https://github.com/nukulb/s3-angular-file-upload for another example with fix.

Contributors

arturi	goto-bus-stop	kvz	ifedapoolarewaju	hedgerh	AJvanLoon

nqst	lakesare	kiloreux	sadovnychyi	samuelayo	richardwillars

zcallan	tim-kos	janko	wilkoklak	oliverpool	Botz

ajkachnic	mcallistertyler	mokutsu-coursera	dependabot	DJWassink	taoqf

tuoxiansp	elenalape	gavboulton	bertho-zero	tranvansang	ap—

ofhope	mrbatista	MikeKovarik	pauln	szh	toadkicker

mejiaej	johnnyperkins	dargmuesli	manuelkiessling	nndevstudio	ogtfaber

sksavant	sunil-shrestha	yonahforst	stephentuso	mskelton	btrice

behnammodi	Burkes	craigjennings11	davekiss	frobinsonj	geertclerx

jasonbosco	jedwood	dogrocker	lamartire	Mactaivsh	maferland

Martin005	martiuslim	MatthiasKunnen	msand	richartkeil	richmeij

rosenfeld	jrschumacher	ThomasG77	sparanoid	zhuangya	allenfantasy

Zyclotrop-j	fortrieb	jarey	muhammadInam	rettgerst	mkabatek

jukakoski	olemoign	ajschmidt8	superhawk610	abannach	adamelmore

adamvigneault	adritasharma	ahmedkandel	asmt3	alexnj	aalepis

amitport	functino	radarhere	superandrew213	andychongyz	anthony0030

arthurdenner	apuyou	bochkarev-artem	atsawin	ayhankesicioglu	azeemba

azizk	bducharme	Quorafind	wbaaron	bedgerotto	cyu

cartfisk	cellvinchung	chao	csprance	Aarbel	cbush06

czj	ardeois	sercraig	danmichaelo	mrboomer	akizor

davilima6	DennisKofflard	jeetiss	dominiceden	sweetro	efbautista

yoldar	eliOcs	EnricoSottile	ethanwillis	Gkleinereva	fgallinari

ferdiusa	dtrucs	geoffappleford	gjungb	roenschg	HughbertD

HussainAlkhalifah	huydod	ishendyweb	NaxYo	ghasrfakhri	intenzive

JacobMGEvans	jdssem	jcjmcclean	janklimo	vith	jessica-coursera

Jmales	theJoeBiz	jonathanarbely	jderrough	jonathanly	jorgeepc

julianocomg	firesharkstudios	elkebab	kyleparisi	lafe	leaanthony

larowlan	dviry	galli-leo	leods92	louim	lucaperret

mperrando	marcusforsberg	Acconut	mattfik	matthewhartstonge	hrsh

mhulet	achmiral	mnafees	shahimclt	pleasespammelater	naveed-ahmad

nicojones	leftdevel	cryptic022	patricklindsay	pedrofs	phillipalexander

Pzoco	eman8519	luarmr	SxDx	phobos101	romain-preston

scherroman	fortunto2	samuelcolburn	sergei-zelinsky	SpazzMarticus	suchoproduction

waptik	steverob	taj	Tashows	twarlop	tmaier

tomsaleeba	tvaliasek	vially	nagyv	willycamargo	xhocquet

yaegor	YehudaKremer	zachconner	zacharylawson	agreene-coursera	alfatv

arggh	avalla	bdirito	c0b41	canvasbh	craigcbrunner

darthf1	dkisic	fingul	franckl	gaelicwinter	green-mike

johnmanjiro13	kode-ninja	magumbo	ninesalt	phil714	luntta

rhymes	rlebosse	rtaieb	thanhthot	tinny77	vedran555

yoann-hellopret	olitomas

Filepond

Filepond is a clever name for a jQuery file upload script that accepts anything and everything. It is a JavaScript library that welcome all types of files, even works with URLs, directories, blobs, you name it. The options and possibilities are numerous when working with Filepond – and you do not need to build it from scratch, how cool is that? The user experience will also be on point at all times due to Filepond’s excellent performance. Drag and drop files, keyboard navigation, image optimization and complete responsiveness, these are some of the core highlights that Filepond sports. Yes, you can use Filepond for uploading in bulk, too.

Download

Using a file

After a file is uploaded, the file upload ID can be used in other API requests. For example, to attach an uploaded file to a particular dispute as evidence:

curl
Ruby
Python
PHP
Java
Node
Go
.NET

curl https://api.stripe.com/v1/disputes/dp_3MX78KVVALll9BO2gQdH \
  -u sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
  -d "evidence"=file_LSd8InASNT8yHN5cABos

# Set your secret key. Remember to switch to your live secret key in production!
# See your keys here: https://dashboard.stripe.com/account/apikeys
Stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'

Stripe::Dispute.update(
  'dp_3MX78KVVALll9BO2gQdH',
  {
    evidence: {
      receipt: 'file_LSd8InASNT8yHN5cABos',
    },
  }
)

# Set your secret key. Remember to switch to your live secret key in production!
# See your keys here: https://dashboard.stripe.com/account/apikeys
stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'

stripe.Dispute.modify(
  'dp_3MX78KVVALll9BO2gQdH',
  evidence={
    'receipt': 'file_LSd8InASNT8yHN5cABos',
  },
)

// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey('sk_test_4eC39HqLyjWDarjtT1zdp7dc');

\Stripe\Dispute::update(
  'dp_3MX78KVVALll9BO2gQdH',
  ,
  ]
);

// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
Stripe.apiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc";

Dispute dispute = Dispute.retrieve("dp_3MX78KVVALll9BO2gQdH");

DisputeUpdateParams params =
  DisputeUpdateParams.builder()
    .setEvidence(
      DisputeUpdateParams.Evidence.builder()
        .setReceipt("file_LSd8InASNT8yHN5cABos")
        .build())
    .build();

dispute.update(params);

// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc');

const dispute = await stripe.disputes.update(
  'dp_3MX78KVVALll9BO2gQdH',
  {
    evidence: {
      receipt: 'file_LSd8InASNT8yHN5cABos',
    },
  }
);

// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
stripe.Key = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"

params := &stripe.DisputeParams{
  Evidence: &stripe.DisputeEvidenceParams{
    Receipt: stripe.String("file_LSd8InASNT8yHN5cABos"),
  },
}
dis, _ := dispute.Update("dp_3MX78KVVALll9BO2gQdH", params)

// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
StripeConfiguration.ApiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc";

var options = new DisputeUpdateOptions
{
    Evidence = new DisputeEvidenceOptions
    {
        Receipt = "file_LSd8InASNT8yHN5cABos",
    },
};
var service = new DisputeService();
var dispute = service.Update("dp_3MX78KVVALll9BO2gQdH", options);

Security of stored files

7.1

ul does not open or view the uploaded files of Users except where ul bears a statutory obligation to do so or is required to do so by order of a regulatory authority or a court. ul neither catalogues nor lists the files in tables of contents. ul does not furnish any search function by which anyone may conduct searches of files in ul’s Service.

7.2

ul has no control over who downloads files stored on ul’s Service by a User’s upload. ul does not provide information to third parties as to the web address under which files are stored on ul’s Service except where ul bears a statutory duty to do so or is required to do so by regulatory or court order.

7.3

These TOS do not give rise to any duty on the part of ul to disclose or provide any indices or directories of files available on ul’s Service.

Old browsers

For browsers not supporting HTML5 FormData (IE8, IE9, …) FileAPI module is used.
Note: You need Flash installed on your browser since uses Flash to upload files.

These two files , will be loaded by the module on demand (no need to be included in the html) if the browser does not supports HTML5 FormData to avoid extra load for HTML5 browsers.
You can place these two files beside on your server to be loaded automatically from the same path or you can specify the path to those files if they are in a different path using the following script:

<script>
    //optional need to be loaded before angular-file-upload-shim(.min).js
    FileAPI = {
        //only one of jsPath or jsUrl.
        jsPath: '/js/FileAPI.min.js/folder/',
        jsUrl: 'yourcdn.com/js/FileAPI.min.js',

        //only one of staticPath or flashUrl.
        staticPath: '/flash/FileAPI.flash.swf/folder/',
        flashUrl: 'yourcdn.com/js/FileAPI.flash.swf',

        //forceLoad: true, html5: false //to debug flash in HTML5 browsers
        //noContentTimeout: 10000 (see #528)
    }
</script>
<script src="angular-file-upload-shim.min.js"></script>...

Old browsers known issues:

• Because of a Flash limitation/bug if the server doesn’t send any response body the status code of the response will be always . So if you have access to your server upload code at least return a character in the response for the status code to work properly.
• Custom headers will not work due to a Flash limitation #111 #224 #129
• Due to Flash bug #92 Server HTTP error code 400 will be returned as 200 to the client. So avoid returning 400 on your server side for upload response otherwise it will be treated as a success response on the client side.
• In case of an error response (http code >= 400) the custom error message returned from the server may not be available. For some error codes flash just provide a generic error message and ignores the response text. #310
• Older browsers won’t allow requests. #261

Contributing

If you’d like to help and keep this project strong and relevant, you have several options.

Help us pay the bills

Fine Uploader is currently looking for a sponsor to pay the AWS bills (which have recently lapsed).
These add up to about $40/month. Please open an issue if you are interesting in becoming a sponsor.
We will happily list you as sponsor on the site and README.

File a bug report

If you see something that isn’t quite right, whether it be in the code, or on the docs site, or even on FineUploader.com (which is hosted on GitHub), please file a bug report. Be sure to make sure the bug hasn’t already been filed by someone else. If it has, feel free to upvote the issue and/or add your comments.

Join the team

Are you interested in working on a very popular JavaScript-based file upload library with countless users? If you’re strong in JavaScript, HTML, and CSS, and have a desire to help push the FOSS movement forward, let us know! The project can always use more experts.

Help spread the word

Are you using Fine Uploader in your library or project? If so, let us know and we may add a link to your project or application and your logo to FineUploader.com. If you care to write an article about Fine Uploader, we would be open to reading and publicizing it through our site, blog, or Twitter feed.

Develop an integration library

Are you using Fine Uploader inside of a larger framework (such as React, Angular2, Ember.js, etc)? If so, perhaps you’ve already written a library that wraps Fine Uploader and makes it simple to use Fine Uploader in this context. Let us know and it may make sense to either link to your library, or even move it into the FineUploader GitHub organization (with your approval, of course). We’d also love to see libraries that make it simple to pair Fine Uploader with other useful libraries, such as image editors and rich text editors.

Contribute code

The best way to contribute code is to open up a pull request that addresses one of the open feature requests or bugs. In order to get started developing Fine Uploader, read this entire section to get the project up and running on your local development machine. This section describes how you can build and test Fine Uploader locally. You may use these instructions to build a copy for yourself, or to contribute changes back to the library.

Setup

You must have Node.js instaled locally (any version should be fine), and you must have Unix-like environment to work with. Linux, FreeBSD/OS X, Cygwin, and Windows 10 bash all should be acceptable environments. Please open up a new issue if you have trouble building. The build process is centered around a single Makefile, so GNU Make is required as well (though most if not all Unix-like OSes should already have this installed). Finally, you will need a git client.

To pull down the project & build dependencies:

1. Download the project repository: .
2. Install all project development dependencies: .

Generating build artifacts

• To build all build artifacts for all endpoint types: . You can speed this process up a bit by using the parallel recipes feature of Make: . If you would like to build only a specific endpoint type, see the Makefile for the appropriate recipe. The build output will be created in the directory.
• To build zip files for all endpoint types: . To build a zip for only a specific endpoint type, see the Makefile for the appropriate recipe. The zip files will be included alongside the build output in the directory.
• To rev the version number: , where is the semver-compatible target version identifier.

Flash

Flash is very «buggy» thing :]
The server response can not be empty.
Therefore, in the event of a successful uploading should be only .

Settings

Flash settings.
It is advisable to place flash on the same server where the files will be uploaded.

<script>
	var FileAPI = {
	 	// @default: "./dist/"
		staticPath: '/js/',

		 // @default: FileAPI.staticPath + "FileAPI.flash.swf"
		flashUrl: '/statics/FileAPI.flash.swf',

		// @default: FileAPI.staticPath + "FileAPI.flash.image.swf"
		flashImageUrl: '/statics/FileAPI.flash.image.swf'
	};
</script>
<script src="/js/FileAPI.min.js"></script>

crossdomain.xml

Necessarily make this file on the server.
Do not forget to replace on the name of your domain.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<site-control permitted-cross-domain-policies="all"/>
	<allow-access-from domain="youdomain.com" secure="false"/>
	<allow-access-from domain="*.youdomain.com" secure="false"/>
	<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

request

The following sample HTTP POST request is sent from Flash Player to a server-side script if no parameters are specified:

POST /server/ctrl.php HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7
User-Agent: Shockwave Flash
Host: www.youdomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache

------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Filename"

MyFile.jpg
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Filedata"; filename="MyFile.jpg"
Content-Type: application/octet-stream

``.``.`FILE_DATA_HERE`.``.``
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Upload"

Submit Query
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7--

Security

By default allows access from any domain via .
This can lead to same origin bypass vulnerability if swf is loaded from the same domain as your critical data.
To prevent this, allow only your domains and rebuild flash.