Mobile Uploads aka Upload Requests

[johnbillion]

I've seen a few instances of web apps with a nice workflow to upload image or media files from another device. The problem this solves is when you're writing on your laptop but realise an image you want is on your phone, or that you want to take a photo on your phone and use it. Clicking an "Upload from mobile" button pops up a QR code which, when scanned on your mobile, presents you with a short-lived file upload screen. Upon upload the file(s) are immediately "used" by the desktop device where it was triggered.

eBay does this via its mobile app which negates the need to scan the QR code, but the principle is the same. I've also seen this on insurance claim websites.

Of course this is possible at the moment in WordPress if you're logged in on both your desktop and mobile and upload a media file to the media library. There are a few benefits of a dedicated workflow:

• No need to be logged in on the mobile device (presuming the URL used for uploading is single-use or short-lived and is invalidated once used)
• Removes the need to manually navigate to your site on your mobile, find the media library, click upload, upload your file, then switch back to the desktop device and find the file

Technical notes

• An "Upload from mobile" button could be shown in several places within the media workflow, for example in the media library or directly in a media block
• When clicked, this generates a special media upload URL that's secured with a single-use or short-lived key
• A QR code is generated for the URL and shown on-screen, so it can be scanned on a mobile device
• When the URL is accessed on your mobile device it presents nothing other than a file upload input that allows a file to be uploaded to the site without authentication but according to the file type permissions of the user that triggered it on their desktop device
• Meanwhile the desktop device either polls for the newly uploaded file(s), or awaits a push notification, or something similar
• Once the file is uploaded, the QR code that's on-screen disappears and the uploaded file is shown
• The QR code popup can be cancelled if necessary, which invalidates the key used in the file upload URL

Thoughts?

[swissspidy]

Ooh I love it! Very interesting idea. I could definitely see this come in handy.

Some thoughts on implementation off the top of my head:

• Register a new post type, let's call it mexp-upload-request
• When clicking on the "Upload from mobile" button in the editor, create a new post in that post type
  • Use something like Sqids or human-id to generate ID that can be easily typed (they look like osT6CU or rare-geckos-jam respectively)
  • Use that ID for the post type slug. Set the current post as the parent and the current user as the author. Post status publish (or inherit?). Additional information can be in the post body (such as which type of media to upload, e.g. only videos or photos or a PDF). The blog post's ID is stored in post meta of this new mexp-upload-request post.
  • Display a modal with a QR code and URL (will be something like example.com/upload-request/rare-geckos-jam)
• When opening that page:
  • Present a nice screen (could perhaps have similar style as wp-login page) with info on what to do and provide simple upload form
  • File upload will go through the same client-side optimization steps (i.e. everything from the upload-media package)
  • The uploaded attachment will have the blog post as the parent (as that's where it's going to end up in)
  • After upload finishes, the mexp-upload-request post will have a trash status and the attachment ID in post meta.
• Meanwhile in the block editor...
  • After the button was clicked, poll the server very regularly (like every 5s or so) for the finished upload (check if the created post is trashed)
  • (Maybe) Prevent closing the editor while an upload is still in progress
  • Once a finished upload request is found in the database, return the associated attachment / attachment ID
  • In the editor, load the attachment and insert it into the editor. Stop polling. Close modal. Stop preventing editor unload.

[swissspidy]

Thanks again for this brilliant suggestion @johnbillion! I've got a first version of this working, see this demo:

Mobile.Upload.Demo.mp4

Will share a narrated demo tomorrow :)

[swissspidy]

Reopening for next iteration, there are some todos about limiting the file type etc.

[johnbillion]

Nice work!

This could actually create a collaboration workflow too. You send that QR code or URL to somebody else and they upload a media file right into your post where you want it. It would require a change to the way the QR code popup blocks the screen though, perhaps if the upload is within the context of a block the QR code would appear within a placeholder for the block, which would allow you to continue working on the rest of the post without having to wait for the upload. That would also make things nicer in case the upload speed on your mobile is slow.

[swissspidy]

Yeah showing this inside a block could definitely be an interesting enhancement. It will open another can of worms as the block needs to be locked while upload is in progress, but should be possible I think.
The whole UX needs some polish anyway, for example by improving the wording and increasing the poll rate.

[swissspidy]

Closing this in favor of individual follow-up issues:

• Upload Requests: allow on per-block basis #452
• Upload Requests: Properly support multiple files #453
• Upload Requests: add to more block types #454