30分間の画像ホスティング

現在、特に初期段階のプロジェクトは、既製のブロックから構築されています。 たとえば、スマートホスティングや、ユーザーのブラウザにすばやくメッセージを送信するサービス。 このようなブロックをさまざまな方法で追加すると、まったく予期しない結果が得られる可能性があります。 また、使用できるブロックが多ければ多いほど、プロジェクトはより多様になります。 いくつかの他のブロックを一度に置き換えることができるブロックが表示される場合があります。 そして、これらのブロック自体は、他のブロックで構成される同じプロジェクトです。



画像ホスティングのようなサービスを作成するのは簡単ですか？ 原則として、以前に行うことは難しくありませんでした。 しかし、進歩はまだ止まっておらず、同時に、より多くのニュアンスを考慮することができます。 Uploadcareプロジェクトについてはすでに話しました。 これは、エンドユーザーへのダウンロード、保存、処理、配布などのファイルの操作を簡単にするサービスです。 これをメインユニットとして使用します。



例はPythonで記述されます。 第一に、私はPythonを最もよく知っているため、第二に、 pyuploadcareライブラリが最初に更新されます。 実際、Uploadcareにはさまざまな言語のライブラリがあり、それらはすべてオープンソースです。 必要なモジュールに機能がない場合は、表示されるまで待つか、自分で追加できます。



Djangoで新しいプロジェクトを作成することから始めましょう。

$ pip install django pyuploadcare==0.19 $ django-admin.py startproject upload_test $ cd upload_test/ && chmod u+x ./manage.py $ ./manage.py startapp imageshare $ ./manage.py syncdb --noinput
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

settings.pyでは、データベースとINSTALLED_APPSに接続するための通常のパラメーターに加えて、公開鍵と秘密鍵を指定する必要があります。

 UPLOADCARE = { 'pub_key': 'demopublickey', 'secret': 'demoprivatekey', }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモンストレーションにはデモアカウントを使用しますが、それ自体は論理的に思えます。 このアカウントの唯一の制限は、ファイルがしばらくしてから削除されることです。



プロジェクトはかなり小さくなります。メインページにダウンロードフォームがあります。 送信後、画像の識別子がデータベースに保存されます。 このためには、このようなモデルで十分です：

 import string import random from pyuploadcare.dj import ImageField from django.db import models class Image(models.Model): slug = models.SlugField(max_length=10, primary_key=True, blank=True) image = ImageField(manual_crop="") def save(self, *args, **kwargs): if not self.slug: self.slug = ''.join(random.sample(string.ascii_lowercase, 6)) super(Image, self).save(*args, **kwargs)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ImageFieldはDjungianではなく、pyuploadcareパッケージからのものです。 設定を1つだけ指定しました。これにより、ユーザーはダウンロードする画像の領域を選択できます。 save（）メソッドは、短いリンクのスラッグを生成します。



きれいになりました：画像を保存するメインページのビューと、それを見ることができるビュー：

 from django.views.generic import DetailView from django.views.generic.edit import CreateView from .models import Image class UploadView(CreateView): model = Image class ImageView(DetailView): model = Image
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラス、2行。 Djangoは、プロジェクトにとって非常に高品質のブロックでもあります。 フォームを表示するには、表示する小さなテンプレートが必要です。 特別なことはありませんが、ウィジェットの公開キーを指定し、ドキュメントタグに{{form.media}}を忘れずに配置する必要があります。 多くの人がこの属性を忘れています。

 {% extends "base.html" %} {% block head %} <script> UPLOADCARE_PUBLIC_KEY = 'demopublickey'; </script> {{ form.media }} {% endblock %} {% block body %} <div class="center"> <form action="." method="post"> <p>Please, select an image:</p> <p>{{ form.image }}</p> <p><input type="submit" value="send"></p> {{ form.errors }} </form> </div> {% endblock %}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

始めます。







ファイル選択ウィジェットがページに表示されました。 しかし、保護は機能しません、ジャンガは「リダイレクトするURLがありません」と誓います。 画像への完全なリンクを取得する方法をどこかで指定する必要があります。 モデルに別のメソッドを追加します。

  @models.permalink def get_absolute_url(self): return 'detail', (), {'pk': self.pk}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

完全な結論のテンプレートを作成することは残っており、目標は達成されたと言えます。

 {% block body %} <img src="{{ image.image }}"> {% endblock %}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私のインスタグラムの人はこんにちはと言います。







気配りのある読者は、すべてが最大で約15分かかったことに気付くでしょう。



ダウンロードページを改善できます。 現在のフォームでは、ユーザーはさらに2回クリックする必要があります。ウィジェットを開き、フォームを送信するためです。 それらを削除できます。 これを行うには、 javascript apiウィジェットを使用します 。

 <script> (function() { uploadcare.start(); var widget = uploadcare.Widget('#id_image'); widget.openDialog(); widget.onChange(function(file) { if (file) { var form = document.getElementById('upload-form'); form.submit(); form.style.display = 'none'; } }); })(); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、ページの読み込みを待たずにstart（）メソッドを使用してウィジェットを初期化し、ユーザーがクリックするのを待たずにダイアログを開きます。 ファイルがアップロードされている場合は、フォームを送信してください。



他に何？ 画像表示ページをもう少しわかりやすくすることができます。画像全体ではなくプレビューを表示し、情報を表示します。

 {% block body %} <h2>Uploaded Image</h2> <a href="{{ image.image.cdn_url }}"> <img align="left" src="{{ image.image.cdn_url }}-/stretch/off/-/resize/260x/"></a> <div class="float-info"> <p> <b>Filename</b>: {{ image.image.info.filename }}<br> <b>Uploaded</b>: {{ image.image.info.datetime_uploaded|slice:":10" }}<br> <b>Original size</b>: {{ image.image.info.size|filesizeformat }}<br> </p> <p><a href="{{ image.image.cdn_url }}">Full link</a></p> </div> <br clear="left"> <p><a href="{% url 'index' %}">Upload another image</a></p> {% endblock %}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画像のURLでオプションを直接指定することにより、目的のサイズのプレビューが取得されます。 情報はinfoメソッドを通じて取得されます。 残念ながら、datetime_uploadedは文字列として渡されるので、最初の10文字をカットしてカンニングしなければなりませんでした。 良い方法では、それを解析する必要がありました。 私は誰かが1万年前に修正することを願っています:)







修正できるもう1つの小さなことは、写真が削除されたときの状況を適切に処理することです。 正しく処理することは、500ではなく404のエラーを与えることを意味します。データベースからオブジェクトを受信するときにこれを行うのが最善です。ファイルに関する情報を要求し、ファイルが削除された兆候がある場合は、保存されているリンクを削除します。 さらに、ファイルがかなり前に削除されている場合、APIは何も返さない場合があります。 処理が必要な場合など。

 class ImageView(DetailView): model = Image def get_object(self): object = super(ImageView, self).get_object() try: if object.image.is_removed: raise ValueError('File was deleted.') except (InvalidRequestError, ValueError): object.delete() raise Http404 return object
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今、おそらく、あなたはやめることができます。 最後のブロック-特定の負荷herokuホスティングに無料-を使用し、結果を確認します： iamshare.herokuapp.com 。 ソースコードは 、誰かがすべてを一緒に見ることに興味がある場合にも利用できます。