rnicholus

Getting To Know the File API

The File API is supported in all modern browsers. The W3C spec allows you to upload files via XHR/ajax, read/manipulate files, and, in some cases, access the filesystem. This is all native to the browser, so no need for ActiveX, Flash, or Java! In this presentation, I'll cover the following:

• What does this spec provide?
• What are File and Blob objects?
• Reading files
• Manipulating blobs and creating your own
• Handling dropped files and folders
• Handling files and folders via ``

rnicholus

• [File API spec][fileapi]
• ["File System" spec][filesystemapi]
• [Blob interface (MDN)][blob]
• [File interface (MDN)][file]
• [FileReader (MDN)][filereader]
• [Fine Uploader][fu]
• [frame-grab.js][framegrab] (A library I'm working on that aims to do some interesting this with <video> (and video Files) using <canvas>)
• [Widen careers][widen]

rnicholus

Why?

More and more of our application code will live in the browser over time as JavaScript, and perhaps our server code will utilize the same language as well. Luckily, it's pretty easy to learn JavaScript. JavaScript is becoming more central to web applications.

With this in mind, it will be beneficial for non-developers to gain a better understanding of this language, and how it is used in the browser and on the server. We can start out simple, and work up to the level of proficiency required to aid in debugging web app issues, writing automated end-to-end tests. Perhaps you will find yourself developing a web application of your own.

Course Outline

I hope to hold 1 - 1.5 hour sessions every 2-3 weeks, depending on my schedule. Perhaps other developers can assist as well, schedule permitting.

rnicholus

function process(file) {
  var processedVersion = /*do stuff and return a processed version */
  
  processedVersion.processedByMyApp = true;
  uploader.addBlobs(processedVersion);
}

var uploader = new qq.FineUploader({
  request: {
    endpoint: "/uploads"

rnicholus

App.fineUploader = new qq.FineUploaderBasic({
  callbacks: {
    onValidate: function() {
        if (itemLimitOverride > 0) {
            return itemLimitOverride > this.getNetUploads();
        }
    }
  }
};

rnicholus

(function(){var arrayOf=function(pseudoArray){return Array.prototype.slice.call(pseudoArray)},fire=function(node,type,_detail_){var detail=_detail_===null||_detail_===undefined?{}:_detail_,event=new CustomEvent(type,{bubbles:true,cancelable:true,detail:detail});if(customPreventDefaultIgnored)event.preventDefault=function(){Object.defineProperty(this,"defaultPrevented",{get:function(){return true}})};node.dispatchEvent(event);return event},customPreventDefaultIgnored=function(){var tempElement=document.createElement("div"),
event=fire(tempElement,"foobar");event.preventDefault();return!event.defaultPrevented}(),getEnctype=function(ajaxForm){var enctype=ajaxForm.getAttribute("enctype");return enctype||"application/x-www-form-urlencoded"},getValidMethod=function(method){if(method){var proposedMethod=method.toUpperCase();if(["GET","POST","PUT","PATCH"].indexOf(proposedMethod)>=0)return proposedMethod}},importDoc=document._currentScript.ownerDocument,interceptSubmit=function(ajaxForm){ajaxForm.addEventListener("su

rnicholus

My thought has always been: 3 method parameters is too many. So, the following method call:

sayHi(this.props.firstname, this.props.lastnane this.state.message)

...to this:

sayHi({

rnicholus

In order to clarify the intellectual property license granted with Contributions from any person or entity, Widen must have a Contributor License Agreement (“CLA”) on file that has been signed by each Contributor, indicating agreement to the license terms below. This license is for your protection as a Contributor as well as the protection of Widen; it does not change your rights to use your own Contributions for any other purpose.

You accept and agree to the following terms and conditions for Your present and future Contributions submitted to Widen. Except for the license granted herein to Widen and recipients of software distributed by Widen, You reserve all right, title, and interest in and to Your Contributions.

1. Definitions. “You” (or “Your”) shall mean the copyright owner or legal entity authorized by the copyright owner that is making this Agreement with Widen. For legal entities, the entity making a Contribution and all other entities that control, are controlled by, or are under common control wi

rnicholus

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

rnicholus

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>POST</AllowedMethod>
  <AllowedMethod>PUT</AllowedMethod>
  <AllowedMethod>DELETE</AllowedMethod>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
  <ExposeHeader>ETag</ExposeHeader>
  <AllowedHeader>*</AllowedHeader>