Requirement (I want to…):
Create Campaign - Upload an image for the email using file upload or picker (not URL Input)
Upload a file that I want to make available using an hyperlink in my assets
Expected Result (So that I can…):
Benefit (And enjoy….):
Compiled Task Analysis:
Both PDF and Image would have similar method: upload file that we push to design studio and return URL. URL is then pushed to Token Field Value on campaign "Submit" Process.
Considerations:
Destination folder will be a dedicated design studio folder: Unique for all Launches = easiest
API Permissions to be validated
Folders: One dedicated folder in
Workspaces : 1
Image size is often preset and may need to be non editable by end user to avoid errors
Original image may be of wrong size.
Image size is important - should be optimized in size
Image should be in resizable format for Mobile MORE INFO NEEDED HOW MARKETO DOES THAT
User may have the URL hosted on a popular cloud application (drive, box, etc)
User may still have the public URL of the image and provide it for us to "grab image and load
This will add 1-2 additional API call per campaign
Specifications/Notes:
Launcher Form:
New Form Element will create a Image "drag/drop" Zone + Upload button
"Field" Parameters will contain
Marketo Token
Image Size: Minimally, the width or the height has to be fixed. (If needed - multiple sizes for screen sizes).
Force a certain resolution?
Destination Folder: User use picklist from Desifn Studion folder AND/OR specify a name of folder to be created. User can either create a new folder at root, select an existing folder and save there or , Create a new subfolder and save there.
Campaign Form - Image Upload
Field shows a drop zone or click to upload
Widget would open in modal
User can specify a web URL
User can drag the image in a drop zone
Click upldoad which will allow to computer browser and select + upload
Once image is loaded:
Position + Crop
Resize is forced
Campaign Form - File Upload
IMAGE Upload (from computer, from box, from drive) via "upload button"
Click on Field opens widget
Option to
Drag & Drop
Upload from computer
Web (URL)
Future State: Search Web, Box, Drive, Instagram, etc.
position & crop
Flip (90 de left or right
Save
Save
API call to Marketo to upload image on Save. URL is returned and we store it in cache for form parameters.
On save we push the URL to Marketo in Token value (.
Assumption:
Marketo is not doing file optimization TO BE CONFIRMED
Marketo is doing the CDN
Risks
Marketo API reliability
Future State
We can later migrate to "Jeto" hosted images.
Many options available
RESEARCH NOTES
NGX Image Editor
https://www.npmjs.com/package/ngx-image-editor
Option 2) Jeto UI to input image parameters, Upload/Transform by 3rd party services
3rd party services
https://cloudinary.com/pricing
Amazon S3 Bucket https://grokonez.com/aws/angular-4-amazon-s3-example-how-to-upload-file-to-s3-bucket
Widget/Plugin: we can build from Angular from scratch or using pre
Hosting / CDN: we can push to Marketo, 3rd Party CDN or Host on our own AWS S3 Bucket.
Field to attach PDF
Merged