Exam 70-480 topic 3 question 18 discussion

Actual exam question from Microsoft's 70-480

Question #: 18
Topic #: 3

You develop an HTML5 application that allows users to upload files from their local computers.
The user interface must remain responsive during the upload.
You need to implement the file upload functionality for the application.
Which two actions should you perform? (Each correct answer presents a complete solution. Choose two.)

A. Use an HTML form with a file type INPUT element that targets a hidden IFRAME element.
B. Use a file type INPUT element, and then use the Web Storage API to upload the file.
C. Use a FormData object and upload the file by using XMLHttpRequest.
D. Register the file protocol by using protocol handler registration API and then upload the file by using XMLHttpRequest.
E. Use the FileSystem API to load the file, and then use the jQuery post method to upload the file to the server.

Show Suggested Answer

Suggested Answer: BD 🗳️
B: Example (notice the web storage api upload.aspx):
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
D:
* Because we're using XMLHttpRequest, the uploading is happening in the background. The page the user is on remains intact. Which is a nice feature to have if your business process can work with it.
* The XMLHttpRequest object has gotten a facelift in the Html5 specifications. Specifically the XMLHttpRequest Level 2 specification (currently the latest version) that has included the following new features:
✑ Handling of byte streams such as File, Blob and FormData objects for uploading and downloading
✑ Progress events during uploading and downloading
✑ Cross-origin requests
✑ Allow making anonymous request - that is not send HTTP Referer
✑ The ability to set a Timeout for the Request

by eMax at Oct. 15, 2019, 12:19 a.m.

Comments

Submit Cancel

krzysiekprzybylak

4 years, 11 months ago

C E in my opinion

upvoted 3 times

...

Bennyseems

5 years, 3 months ago

A and C. A creates the form element for the file input. C uploads it.

upvoted 2 times

...

TonyBezerra

5 years, 4 months ago

I think C is the right answer.

upvoted 1 times

...

danhan

5 years, 6 months ago

E is wrong: the "Filesystem API" is restricted to access a sandboxed filesystem: local files in the client's filesystem are not accessible. But: the "File API" can read file contents if the user selects them in a <input type="file" element. ref. https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

upvoted 1 times

...

danhan

5 years, 6 months ago

D is wrong: custom protocol handlers are not suitable for uploading files... ref. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler

upvoted 1 times

...

danhan

5 years, 6 months ago

B is wrong: B. Use a file type INPUT element, and then use the Web Storage API to upload the file. You can store key/value pairs locally on the client, but you cannot upload anything using the Webstorage API.

upvoted 1 times

...

danhan

5 years, 6 months ago

C is correct, too: C. Use a FormData object and upload the file by using XMLHttpRequest. reason: see the example "sending files..." in https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

upvoted 1 times

...

eMax

5 years, 7 months ago

Web storage is for storing data locally in the browser. Better call it Web api.

upvoted 1 times

...