Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
123 lines (104 sloc) 3.83 KB
---
slug: direct-s3-upload/images
metadata:
full_width: true
description: Direct S3 upload with image processing
docs_slug: tutorials/user-uploads/uploading-files-directly-amazons3-using-uppy
---
{% unless context.current_user.id %}
<div class="alert alert-danger">
<strong>Heads up!</strong> Example below require you to be logged in.
<br/>
If you dont have an account, <a href="/developer/sign-up">create your developer account here</a>.
</div>
{% else %}
<h2 id="#direct-upload-using-uppy">Direct upload using uppy (<a href="https://uppy.io/" target="_blank" rel="noopener">uppy.io</a>)</h2>
{% graphql data %}
mutation presign {
image_presign_url(
options: {
content_length: { gte: 0, lte: 2048 }
model_property: { model_schema_name: "modules/direct_s3_upload/uppy", property_name: "photo" }
}
) {
upload_url
upload_url_payload
}
}
{% endgraphql %}
{% assign data = data.image_presign_url %}
<!-- Expose presign fields as form, to easily digest it in JS -->
<form action="{{ data.upload_url }}" hidden data-s3-uppy="form" data-s3-uppy-user-id="{{ context.current_user.id }}">
{% for field in data.upload_url_payload %}
<input type="hidden" name="{{ field[0] }}" value='{{ field[1] }}'>
{% endfor %}
</form>
<div class="row">
<div class="col-5">
<div class="card">
<div class="card-body">
<div id="drag-drop-area"></div>
</div>
</div>
</div>
<div class="col-7">
<div class="card">
<div class="card-body">
<p>Uppy plugins used:</p>
<ol>
<li>Dashboard</li>
<li>DragDrop</li>
<li>GoldenRetriever</li>
<li>AwsS3</li>
</ol>
<hr>
<p>URLs to image returned by AWS (input):</p>
<small>
<ol data-s3-uppy="log"></ol>
</small>
</div>
</div>
</div>
</div>
<!-- Get recently uploaded images for this user, in all versions -->
{% graphql models = "modules/direct_s3_upload/get_models", per_page: 5, user_id: context.current_user.id | dig: "models" %}
{% if models.total_entries > 0 %}
<hr>
<div class="row my-2">
<div class="col-9">
<h3>Last 5 processed images:</h3>
</div>
</div>
<!-- Show all versions next to each other -->
{% for model in models.results %}
{% assign versions = model | dig: "images" | first %}
<div class="card my-4">
<div class="card-body">
<div class="row">
{% for version in versions %}
<div class="col-sm-2">
<h4>{{ version[0] }}</h4>
<a href="{{ version[1] }}">
<img src="{{ version[1] }}" alt="{{ version[0] }}" width="150">
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endunless %}
<hr>
<p>
Source code of this example:
<a href="https://github.com/mdyd-dev/marketplace-nearme-example/blob/master/modules/direct_s3_upload/public/assets/images.js" target="_blank">JS</a>,
<a href="https://github.com/mdyd-dev/marketplace-nearme-example/blob/master/modules/direct_s3_upload/public/views/pages/images.liquid" target="_blank">HTML</a>
<a href="https://github.com/mdyd-dev/marketplace-nearme-example/blob/master/modules/direct_s3_upload/public/graph_queries" target="_blank">GraphQL</a>
</p>
{% content_for "head:bottom" %}
<link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.css" rel="stylesheet">
<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.js" defer></script>
<script src="{{ 'modules/direct_s3_upload/images.js' | asset_url }}" defer></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9" defer></script>
{% endcontent_for %}
You can’t perform that action at this time.