franzwilding · December 7, 2018 11:14
diff --git a/unite-cms-file-upload.html b/unite-cms-file-upload.html
 <html>
    <head></head>
    <body>          

        <input type="file" id="upload" />
        <script>

            const FIELD_NAME = 'image';
            const MUTATION = 'createArticle';
            const ENDPOINT = 'https:{ENDPOINT}/{DOMAIN}/api';
            const TOKEN = 'XXX';

            /**
             * Asks the unite cms storage api for a pre-signed url for the 
             * given filename and field.
             */
            let preSignRequest = (file, field_name) => {
                return new Promise((resolve, reject) => {
                    let preSignData = new FormData();
                    preSignData.append('pre_sign_form[filename]', file.name);
                    preSignData.append('pre_sign_form[field]', field_name);

                    let XHR = new XMLHttpRequest();
                    XHR.open('POST', ENDPOINT + '/storage/sign/content/cvs/upload', true);
                    XHR.setRequestHeader('authorization', TOKEN);
                    XHR.onload = (response) => { resolve(JSON.parse(response.target.response)); };
                    XHR.onerror = () => { reject(); }
                    XHR.send(preSignData);
                });
            };

            /**
             * Upload the file directly to the s3 server using the pre-signed url from signature.
             */
            let s3UploadRequest = (file, signature) => {
                return new Promise((resolve, reject) => {
                    let XHR = new XMLHttpRequest();
                    XHR.open('PUT', signature.pre_signed_url);
                    XHR.onload = () => { resolve(); };
                    XHR.onerror = () => { reject(); }
                    XHR.send(file);
                });
            };

            /**
             * Create a new unite cms content element with the uploaded file.
             */
            let uniteContentCreateRequest = (file, signature) => {
                return new Promise((resolve, reject) => {
                    let XHR = new XMLHttpRequest();
                    XHR.open('POST', ENDPOINT, true);
                    XHR.setRequestHeader('authorization', TOKEN);
                    XHR.setRequestHeader("Content-Type", "application/json");
                    XHR.onload = (response) => { resolve(JSON.parse(response.target.response).data[MUTATION]); };
                    XHR.onerror = () => { reject(); }
                    XHR.send('{ "query": ' + JSON.stringify(`mutation {
                        ${MUTATION}(data: {
                            ${FIELD_NAME}: {
                                name: "${signature.filename}",
                                checksum: "${signature.checksum}",
                                size: ${file.size},
                                id: "${signature.uuid}",
                                type: "${file.name}"
                            }
                        }, persist: true) {
                            id,
                            ${FIELD_NAME} {
                                url
                            }
                        }
                    }`) + ' }');
                });
            };

            document.getElementById('upload').addEventListener('change', (event) => {
                
                let file = event.target.files[0];
                let onError = () => { alert("THERE WAS AN ERROR. PLEASE CHECK THE CONSOLE."); };
                let onSuccess = (content) => { alert(`CONTENT WITH ID ${content.id} WAS CREATED SUCCESSFULLY. FILE CAN BE DOWNLOADED UNDER: ${content[FIELD_NAME].url}.`) };

                // Get pre-signed url
                preSignRequest(file, FIELD_NAME)

                    .then((signature) => {

                        // Upload file directly to s3.
                        s3UploadRequest(file, signature)
                            .then(() => {

                                // Create a new unite cms content entity with the uploaded file.
                                uniteContentCreateRequest(file, signature)
                                    .then(onSuccess).catch(onError);
                            }).catch(onError);
                    }).catch(onError);

            });
        </script>

    </body>
 </html>
	<html>
	<head></head>
	<body>

	<input type="file" id="upload" />
	<script>

	const FIELD_NAME = 'image';
	const MUTATION = 'createArticle';
	const ENDPOINT = 'https:{ENDPOINT}/{DOMAIN}/api';
	const TOKEN = 'XXX';

	/**
	* Asks the unite cms storage api for a pre-signed url for the
	* given filename and field.
	*/
	let preSignRequest = (file, field_name) => {
	return new Promise((resolve, reject) => {
	let preSignData = new FormData();
	preSignData.append('pre_sign_form[filename]', file.name);
	preSignData.append('pre_sign_form[field]', field_name);

	let XHR = new XMLHttpRequest();
	XHR.open('POST', ENDPOINT + '/storage/sign/content/cvs/upload', true);
	XHR.setRequestHeader('authorization', TOKEN);
	XHR.onload = (response) => { resolve(JSON.parse(response.target.response)); };
	XHR.onerror = () => { reject(); }
	XHR.send(preSignData);
	});
	};

	/**
	* Upload the file directly to the s3 server using the pre-signed url from signature.
	*/
	let s3UploadRequest = (file, signature) => {
	return new Promise((resolve, reject) => {
	let XHR = new XMLHttpRequest();
	XHR.open('PUT', signature.pre_signed_url);
	XHR.onload = () => { resolve(); };
	XHR.onerror = () => { reject(); }
	XHR.send(file);
	});
	};

	/**
	* Create a new unite cms content element with the uploaded file.
	*/
	let uniteContentCreateRequest = (file, signature) => {
	return new Promise((resolve, reject) => {
	let XHR = new XMLHttpRequest();
	XHR.open('POST', ENDPOINT, true);
	XHR.setRequestHeader('authorization', TOKEN);
	XHR.setRequestHeader("Content-Type", "application/json");
	XHR.onload = (response) => { resolve(JSON.parse(response.target.response).data[MUTATION]); };
	XHR.onerror = () => { reject(); }
	XHR.send('{ "query": ' + JSON.stringify(`mutation {
	${MUTATION}(data: {
	${FIELD_NAME}: {
	name: "${signature.filename}",
	checksum: "${signature.checksum}",
	size: ${file.size},
	id: "${signature.uuid}",
	type: "${file.name}"
	}
	}, persist: true) {
	id,
	${FIELD_NAME} {
	url
	}
	}
	}`) + ' }');
	});
	};

	document.getElementById('upload').addEventListener('change', (event) => {

	let file = event.target.files[0];
	let onError = () => { alert("THERE WAS AN ERROR. PLEASE CHECK THE CONSOLE."); };
	let onSuccess = (content) => { alert(`CONTENT WITH ID ${content.id} WAS CREATED SUCCESSFULLY. FILE CAN BE DOWNLOADED UNDER: ${content[FIELD_NAME].url}.`) };

	// Get pre-signed url
	preSignRequest(file, FIELD_NAME)

	.then((signature) => {

	// Upload file directly to s3.
	s3UploadRequest(file, signature)
	.then(() => {

	// Create a new unite cms content entity with the uploaded file.
	uniteContentCreateRequest(file, signature)
	.then(onSuccess).catch(onError);
	}).catch(onError);
	}).catch(onError);

	});
	</script>

	</body>
	</html>