Skip to content

Instantly share code, notes, and snippets.

@oliverlj
Created June 19, 2020 09:12
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oliverlj/fbf9ae7a30f3c221998174291a71a9d6 to your computer and use it in GitHub Desktop.
Save oliverlj/fbf9ae7a30f3c221998174291a71a9d6 to your computer and use it in GitHub Desktop.
export default class File {
/**
* Returns the appropriate file extension of the file according to the type
*/
extension: string;
/**
* A unique id generated for this file
*/
id: string;
loaded: number;
/**
* The file name
*/
name: string;
progress: number;
/**
* The size of the file in bytes
*/
size: number;
/**
* The source of the file. This is useful for applications that want to gather analytics about how users upload their content.
* - browse is the source when the file is created using the native file picker
* - drag-and-drop is the source when the file was created using drag and drop from their desktop
* - web is the source when the file was created by dragging the file from another webpage.
* - data-url is the source when the file is created from a data URL using the fromDataURL method for files. This usually means that the file was created manually by the developer on behalf of the user
* - blob is the source when the file is created from a blob using the fromBlob method for files. This usually means that the file was created manually by the developer.
*/
source: 'browse' | 'drag-and-drop' | 'web' | 'data-url' | 'blob';
/**
* The current state that the file is in. Implementers should call flush() on the file's queue after mutating this property
*/
state: 'queued' | 'uploading' | 'timed_out' | 'aborted' | 'uploaded' | 'failed';
/**
* The MIME type of the file.
* For a image file this may be image/png
*/
type: string;
/**
* Upload file to your server
* @param url Your server endpoint where to upload the file
* @param opts { fileKey: string, data: { key: string } }
*/
upload(url: string, opts: {}): Promise<any>;
/**
* Upload file with application/octet-stream content type
* @param url Your server endpoint where to upload the file
* @param opts
*/
uploadBinary(url: string, opts: {}): Promise<any>;
/**
* Resolves with Blob as ArrayBuffer
*/
readAsArrayBuffer(): Promise<any>;
/**
* Resolves with Blob as binary string
*/
readAsBinaryString(): Promise<string>;
/**
* Resolves with Blob as DataURL
*/
readAsDataURL(): Promise<string>;
/**
* Resolves with Blob as plain text
*/
readAsText(): Promise<any>;
/**
* Creates a file object that can be read or uploaded to a server from a Blob object
* @param blob The blob to create the file from
* @param source The source that created the blob.
*/
static fromBlob(blob: Blob, source: string): Promise<any>;
/**
* Creates a file object that can be read or uploaded to a server from a data URL
* @param dataURL The data URL to create the file from
* @param source The source of the data URL
*/
static fromDataURL(dataURL: string, source: string): Promise<any>;
}
import FileQueue from './services/file-queue';
export default class Queue {
/**
* The FileQueue service
*/
fileQueue: FileQueue;
/**
* The unique identifier of the queue.
*
* Queue names should be deterministic so they can be retrieved. It's recommended to provide a helpful name.
*
* If the queue belongs to a top level collection, photos, the good name for this queue may be "photos".
*
* If you're uploading images to an artwork, the best name would incoporate both "artworks" and the identifier of the
* artwork. A good name for this queue may be "artworks/{{id}}/photos", where {{id}} is a dynamic segment that is
* generated from the artwork id.
*/
name: string;
/**
* The list of files in the queue. This automatically gets flushed when all the files in the queue have settled.
*
* Note that files that have failed need to be manually removed from the queue. This is so they can be retried
* without resetting the state of the queue, orphaning the file from its queue. Upload failures can happen due to
* a timeout or a server response. If you choose to use the abort method, the file will fail to upload, but will be
* removed from the requeuing proccess, and will be considered to be in a settled state.
*/
files: File[];
/**
*
* @param file The file to append to the queue
*/
push(file: File): any;
/**
*
* @param file The file to remove from the queue.
*/
remove(file: File): any;
}
import File from 'ember-file-upload/file';
export default class FileQueue {
/**
* The list of all files in queues. This automatically gets flushed when all the files in the queue have settled.
*
* Note that files that have failed need to be manually removed from the queue. This is so they can be retried
* without resetting the state of the queue, orphaning the file from its queue. Upload failures can happen due
* to a timeout or a server response. If you choose to use the abort method, the file will fail to upload, but
* will be removed from the requeuing proccess, and will be considered to be in a settled state.
*/
files: File[];
/**
* The number of bytes that have been uploaded to the server.
*/
loaded: number;
/**
* The current progress of all uploads, as a percentage in the range of 0 to 100.
*/
progress: number;
/**
* The total size of all files currently being uploaded in bytes.
*/
size: number;
/**
* Flushes the files property if they have settled. This will only flush files when all files have arrived at a
* terminus of their state chart. Files may be requeued by the user in the failed or timed_out states.
*/
flush(): any;
/**
* Returns a queue with the given name
* @param name The name of the queue to find
*/
find(name: string): Queue;
/**
* Create a new queue with the given name.
* @param name The name of the queue to create
*/
create(name: string): Queue;
}
export default class FileReader {
/**
* Reads the file and returns a promise that will return the blob as ArrayBuffer.
*/
readAsArrayBuffer(): Promise<any>;
/**
* Reads the file and returns a promise that will return the blob as binary string.
*
* This is useful for reading images or files that are not plain text.
*/
readAsBinaryString(): Promise<string>;
/**
* Reads the file and returns a promise that will return the blob as data URL.
*
* This is useful for reading images to display as a preview in the browser.
*/
readAsDataURL(): Promise<string>;
/**
* Reads the file and returns a promise that will return the blob as text.
*
* This is useful for reading plain text files.
*/
readAsText(): Promise<any>;
}
import File from 'ember-file-upload/file';
/**
* Triggers a change event on a FileUpload input with files.
*
* All files must be HTML5 File objects.
*
* A single file, or multiple files may be passed as arguments.
*
* ```
* // A single file
* const file = new File([], 'dingus.txt');
* await selectFiles('.file-upload input', file);
* ```
*
* ```
* // Multiple files
* const file1 = new File([], 'dingus1.txt');
* const file2 = new File([], 'dingus2.txt');
* await selectFiles('.file-upload input', file1, file2);
* ```
*
* @param selector DOM selector for a FileUpload input
* @param files One or more File objects
* @returns Returns Promise<void> which resolves when the application is settled.
*/
export function selectFiles(selector: string, files: File): Promise<void>;
/**
* Triggers dragenter, dragover, and drop events on a FileDropzone with files.
*
* All files must be HTML5 File objects.
*
* A single file, or multiple files may be passed as arguments.
*
* ```
* // A single file
* const file = new File([], 'dingus.txt');
* await dragAndDrop('.file-dropzone', file);
* ```
*
* ```
* // Multiple files
* const file1 = new File([], 'dingus1.txt');
* const file2 = new File([], 'dingus2.txt');
* await dragAndDrop('.file-dropzone', file1, file2);
* ```
*
* @param selector DOM selector for a FileUpload input
* @param files One or more File objects
* @returns Returns Promise<void> which resolves when the application is settled.
*/
export function dragAndDrop(selector: string, files: File): Promise<void>;
/**
* Triggers a dragenter event on a FileDropzone with files.
*
* All files must be HTML5 File objects.
*
* A single file, or multiple files may be passed as arguments.
*
* ```
* // A single file
* const file = new File([], 'dingus.txt');
* await dragEnter('.file-dropzone', file);
* ```
*
* ```
* // Multiple files
* const file1 = new File([], 'dingus1.txt');
* const file2 = new File([], 'dingus2.txt');
* await dragEnter('.file-dropzone', file1, file2);
* ```
*
* @param selector DOM selector for a FileUpload input
* @param files One or more File objects
* @returns Returns Promise<void> which resolves when the application is settled.
*/
export function dragEnter(selector: string, files: File): Promise<void>;
/**
* Triggers a dragleave event on a FileDropzone with files.
*
* All files must be HTML5 File objects.
*
* A single file, or multiple files may be passed as arguments.
*
* ```
* // A single file
* const file = new File([], 'dingus.txt');
* await dragLeave('.file-dropzone', file);
* ```
*
* ```
* // Multiple files
* const file1 = new File([], 'dingus1.txt');
* const file2 = new File([], 'dingus2.txt');
* await dragLeave('.file-dropzone', file1, file2);
* ```
*
* @param selector DOM selector for a FileUpload input
* @param files One or more File objects
* @returns Returns Promise<void> which resolves when the application is settled.
*/
export function dragLeave(selector: string, files: File): Promise<void>;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment