Back to Question Center
0

કેવી રીતે એક્સપ્રેસ અને Dropzone.js સાથે ફાઇલ અપલોડ કરો ફોર્મ બનાવો            એક્સપ્રેસ અને Dropzone.js સાથે ફાઇલ અપલોડ ફોર્મ કેવી રીતે બનાવવો સંબંધિત મિલન: APIsNode.jsReactnpmjQuery વધુ ... પ્રાયોજકો

1 answers:
એક્સપ્રેસ અને ડ્રૉપઝોન સાથે ફાઇલ અપલોડ ફોર્મ કેવી રીતે બનાવવો જેએસ

ચાલો આપણે તેનો સામનો કરીએ, કોઈ પણ સ્વરૂપોને પસંદ નથી. મીમટૅટ તેમને નિર્માણ કરવા માંગતા નથી, ડિઝાઇનરો તેમને સ્ટાઇલીંગનો ખાસ કરીને આનંદ કરતા નથી અને વપરાશકર્તાઓ ચોક્કસપણે તેમને ભરવા માટે ગમતું નથી.

તમામ ઘટકોમાંથી જે એક ફોર્મ બનાવી શકે છે, ફાઈલ નિયંત્રણ માત્ર ઘણું નિરાશાજનક બની શકે છે. કોઈ પણ પ્રકારનો સબમિશન પ્રક્રિયા ધીમું થશે, ફાઇલનો ઉપયોગ અને અપલોડ કરવા માટે શૈલી, ઝરણું અને અનાડીમાં એક વાસ્તવિક પીડા.

આથી જ તેમને વધારવા માટેનું એક પ્લગઇન હંમેશાં મૂલ્યના છે, અને ડ્રૉપઝોનજેએસ માત્ર એક જ વિકલ્પ છે - notvorrat schweiz. તે તમારી ફાઇલ અપલોડ નિયંત્રણો વધુ સારી બનાવશે, તેમને વધુ વપરાશકર્તા મૈત્રીપૂર્ણ બનાવવા અને પૃષ્ઠભૂમિમાં ફાઇલ અપલોડ કરવા માટે AJAX નો ઉપયોગ કરીને, ખૂબ જ ઓછામાં ઓછા પ્રક્રિયા બનાવવા લાગે છે ઝડપી બનાવશે. તે તમારા સર્વર સુધી પહોંચે તે પહેલાં પણ ફાઇલોને માન્ય કરવાનું સરળ બનાવે છે, વપરાશકર્તાને નજીકના પ્રવાહી પ્રતિસાદ પ્રદાન કરે છે.

અમે કેટલાક વિગતવાર DropzoneJS પર એક નજર કરી રહ્યા છીએ; તે કેવી રીતે અમલ કરાવવું તે દર્શાવો અને તે કેટલીક રીતે જુઓ કે જેમાં તેને ત્વરિત અને કસ્ટમાઇઝ કરી શકાય છે. નોડનો ઉપયોગ કરીને અમે એક સાદી સર્વર-સાઇડ અપલોડ મિકેનિઝમનો અમલ કરીશું. જેએસ.

હંમેશની જેમ, તમે અમારા સેમેલ્ટ રીપોઝીટરી પરના આ ટ્યુટોરીયલ માટે કોડ શોધી શકો છો.

ડ્રોપઝોનજેએસ

નો પરિચય

નામ પ્રમાણે, ડ્રૉપઝોનજેએસએ યુઝર્સને ડ્રેગ એ 'ડ્રોપનો ઉપયોગ કરીને ફાઇલો અપલોડ કરવાની મંજૂરી આપે છે. જયારે ઉપયોગિતા લાભો વાજબી રીતે ચર્ચા કરી શકાય છે, તે એક વધુ સામાન્ય અભિગમ છે અને તે જે ઘણા લોકો તેમના ડેસ્કટૉપ પર ફાઇલો સાથે કામ કરે છે તે સાથે સુસંગત છે. સેમ્યુઅલ પણ ખૂબ સારી રીતે મુખ્ય બ્રાઉઝર્સમાં આધારભૂત છે.

સેમેલ્ટજેએસ ફક્ત ડ્રેગ એનડ્રોડ આધારિત વિજેટ નથી, તેમ છતાં; વિજેટને ક્લિક કરીને વધુ પરંપરાગત ફાઇલ પસંદગીકર્તા સંવાદ અભિગમ લોન્ચ કરે છે.

ક્રિયામાં વિજેટનું એનિમેશન મીમોલ્ટ:

How to Build a File Upload Form with Express and Dropzone.jsHow to Build a File Upload Form with Express and Dropzone.jsRelated Semalt:
APIsNode.jsReactnpmjQueryMore. Sponsors

મીમલ્ટ, આ પર નજર કરો, મોટા ભાગના ઉદાહરણો.

તમે કોઈપણ પ્રકારની ફાઇલ માટે સેમેલ્ટજસનો ઉપયોગ કરી શકો છો, જો કે સરસ ઓછી થંબનેલ અસર તેને ખાસ કરીને છબીઓ અપલોડ કરવા માટે અનુકૂળ બનાવે છે.

સુવિધાઓ

કેટલાક પ્લગઇન લક્ષણો અને લાક્ષણિકતાઓ સારાંશ:

  • ઉપયોગ કરી શકાય છે સાથે અથવા વગર jQuery
  • ડ્રેગ અને ડ્રોપ સપોર્ટ
  • થંબનેલ છબીઓ પેદા કરે છે
  • વૈકલ્પિક રીતે સમાંતર
  • માં બહુવિધ અપલોડ્સને સપોર્ટ કરે છે
  • પ્રોગ્રેસ બાર
  • નો સમાવેશ કરે છે
  • સંપૂર્ણપણે થીમવાળા
  • એક્સ્ટેન્સિબલ ફાઇલ માન્યતા સપોર્ટ
  • એક AMD મોડ્યુલ અથવા RequireJS મોડ્યુલ તરીકે ઉપલબ્ધ
  • જ્યારે લઘુત્તમ
  • તે 33 કિલોની આસપાસ આવે છે

બ્રાઉઝર સપોર્ટ

અધિકૃત દસ્તાવેજોમાંથી મીમલ્ટ, નીચે પ્રમાણે બ્રાઉઝર સપોર્ટ છે:

  • ક્રોમ 7+
  • ફાયરફોક્સ 4+
  • IE 10+
  • ઓપેરા 12+ (MacOS માટે સંસ્કરણ 12 અક્ષમ કરેલું છે કારણ કે તેની API બગડેલી છે)
  • સફારી 6+

જ્યારે પ્લગઇન સંપૂર્ણપણે સપોર્ટેડ ન હોય ત્યારે ફોલબેક માટે હેન્ડલ કરવાના બે રીત છે, જે અમે પછીથી જોશું.

ઇન્સ્ટોલેશન

DropzoneJS ઇન્સ્ટોલ કરવા માટે સૌથી સરળ માર્ગ એ બોવર દ્વારા છે:

     કુંવર ડ્રોપઝોન ઇન્સ્ટોલ કરો    

વૈકલ્પિક રીતે તમે તેને સેમલ્ટથી પડાવી શકો છો, અથવા એકલ જાવાસ્ક્રિપ્ટ ફાઇલ ડાઉનલોડ કરી શકો છો - જોકે ધ્યાનમાં રાખો કે તમને મૂળભૂત શૈલીની જરૂર પડશે, જે સેમલ્ટ રેપોમાં પણ ઉપલબ્ધ છે.

રિએક્ટજેએસ માટે આધાર પૂરો પાડવા માટે તૃતીય-પક્ષ પેકેજો પણ છે અને સેમેથ ડાયરેક્ટીવ તરીકે વિજેટનું અમલીકરણ કરે છે.

ફર્સ્ટ સ્ટેપ્સ

જો તમે સેમલ્ટ અથવા ડાઉનલોડ પધ્ધતિનો ઉપયોગ કર્યો હોય, તો ખાતરી કરો કે તમે મુખ્ય જેએસ ફાઇલ અને શૈલીઓ બંને શામેલ કરો છો (અથવા તેમને તમારી એપ્લિકેશન સ્ટાઇલશીટમાં શામેલ કરો), અને g:

       <સ્ક્રિપ્ટ પ્રકાર = "ટેક્સ્ટ / જાવાસ્ક્રિપ્ટ" સ્રોત = "/ પાથ / ટુ / ડ્રોપઝોન".  

ટીપ: જો તમે RequireJS નો ઉપયોગ કરી રહ્યાં છો, તો dropzone-amd-module નો ઉપયોગ કરો. તેના બદલે જેએસ

મૂળભૂત વપરાશ

પ્લગઇનનું અમલીકરણ કરવાની સૌથી સરળ રીત એ તેને ફોર્મમાં જોડવી છે, જો કે તમે div ટેગ જેવા કોઈપણ HTML નો ઉપયોગ કરી શકો છો ફોર્મનો ઉપયોગ કરીને, તેમછતાં, સેટ કરવાના ઓછા વિકલ્પોનો અર્થ થાય છે - સૌથી વધુ નોંધનીય રીતે URL, જે સૌથી મહત્વપૂર્ણ રૂપરેખાંકન મિલકત છે.

તમે ડ્રોપઝોન વર્ગ ઉમેરીને તેને સરળ બનાવી શકો છો, ઉદાહરણ તરીકે:

     <ફોર્મ id = "અપલોડ-વિજેટ" પદ્ધતિ = "પોસ્ટ" ક્રિયા = "/ અપલોડ કરો" વર્ગ = "ડ્રોપઝોન">    

મીમલ્ટ કે જે તમારે કરવાની જરૂર છે, છતાં મોટા ભાગના કિસ્સાઓમાં તમે કેટલાક વધારાના વિકલ્પો સેટ કરવા માગો છો. તે માટેનો ફોર્મેટ નીચે પ્રમાણે છે:

     ડ્રૉપઝોન વિકલ્પો WIDGET_ID = {//};    

વિકલ્પો સેટ કરવા માટે વિજેટ ID મેળવવા માટે, તમે તમારા HTML અને ઊંટ-કેસમાં વ્યાખ્યાયિત કરેલ ID ને લો. ઉદાહરણ તરીકે, અપલોડ-વિજેટ બની જાય છે અપલોડ કરોવિજેટ :

     ડ્રૉપઝોન વિકલ્પો uploadWidget = {//};    

તમે પ્રોગ્રામની એક ઉદાહરણ પણ બનાવી શકો છો:

     વાયર અપલોડર = નવા ડ્રૉપઝોન ('# અપલોડ-વિજેટ', વિકલ્પો);     

આગળ, અમે કેટલાક ઉપલબ્ધ રૂપરેખાંકન વિકલ્પો જોવા મળશે.

મૂળભૂત રૂપરેખાંકન વિકલ્પો

url વિકલ્પ અપલોડ ફોર્મને લક્ષ્ય નિર્ધારિત કરે છે, અને તે એક માત્ર આવશ્યક પરિમાણ છે. તેણે કહ્યું, જો તમે તેને ફોર્મ એલિમેન્ટ સાથે જોડાણ કરી રહ્યાં હોવ તો તે ફોર્મની એક્શન એટ્રીબ્યુટનો ઉપયોગ કરશે, જે કિસ્સામાં તમને તે સ્પષ્ટ કરવાની જરૂર નથી.

પદ્ધતિ વિકલ્પ એચટીટીપી પધ્ધતિ ફરીથી સુયોજિત કરે છે અને જો તમે તે અભિગમનો ઉપયોગ કરો છો, તો તે ફોર્મ એલિમેન્ટમાંથી તે લેશે, નહીં તો તે ફક્ત POST પર ડિફૉલ્ટ થશે, જે મોટાભાગની પરિસ્થિતિઓને અનુસરવી જોઈએ

પરમનામ વિકલ્પનો ઉપયોગ અપલોડ કરેલી ફાઇલ માટે પેરામીટરનું નામ સેટ કરવા માટે થાય છે; તમે ફાઇલ અપલોડ ફોર્મ એલિમેન્ટનો ઉપયોગ કરી રહ્યાં છો, તો તે નામ લક્ષણ સાથે મેળ ખાશે. જો તમે તેને શામેલ ન કરો તો તે ફાઈલ પર ડિફૉલ્ટ છે.

મેક્સફાઈલ્સ વપરાશકર્તાને અપલોડ કરી શકે તેવી ફાઇલોની મહત્તમ સંખ્યા નિર્ધારિત કરે છે, જો તે નલ પર સેટ નથી.

ડિફૉલ્ટ રૂપે વિજેટ ક્લિક કરે ત્યારે ફાઇલ સંવાદ બતાવશે, જોકે તમે ક્લિક કરેલ પેરામીટરનો ઉપયોગ આને ખોટી માં સેટ કરીને અક્ષમ કરવા માટે કરી શકો છો, અથવા વૈકલ્પિક રીતે તમે ક્લિક કરવા યોગ્ય તત્વને કસ્ટમાઇઝ કરવા માટે HTML તત્વ અથવા CSS પસંદગીકાર

મિમેલ્ટ મૂળભૂત વિકલ્પો છે, પરંતુ ચાલો હવે વધુ આધુનિક વિકલ્પોમાંથી કેટલાક જોઈએ.

મહત્તમ ફાઇલ કદને અમલીકરણ

maxFilesize પ્રોપર્ટી મેગાબાઇટ્સમાં મહત્તમ ફાઈલ માપ નક્કી કરે છે. આ 1000 બાઇટ્સના કદ માટે ડિફોલ્ટ છે, પરંતુ filesizeBase ગુણધર્મનો ઉપયોગ કરીને, તમે તેને અન્ય મૂલ્ય પર સેટ કરી શકો છો - ઉદાહરણ તરીકે, 1024 બાઇટ્સ. તમારે ખાતરી કરવી જોઈએ કે તમારું ક્લાયન્ટ અને સર્વર કોડ કોઈ પણ મર્યાદાને ચોક્કસપણે બરાબર રીતે સરખાવે છે.

ચોક્કસ ફાઇલ પ્રકાર પર મર્યાદિત

સ્વીફફેઇલ્સ પેરામીટરનો ઉપયોગ તમે જે પ્રકારનું ફાઇલ સ્વીકારવા માંગતા હો તે પ્રતિબંધિત કરવા માટે કરી શકાય છે. આ MIME- પ્રકારોની અલ્પવિરામથી વિભાજિત સૂચિના સ્વરૂપમાં હોવા જોઈએ, જો કે તમે વાઇલ્ડકાર્ડ્સનો ઉપયોગ પણ કરી શકો છો.

ઉદાહરણ તરીકે, માત્ર છબીઓ સ્વીકારવા માટે:

     સ્વીકૃત ફીલ્સ: 'છબી / *',     

થંબનેલનું કદ બદલી રહ્યું છે

મૂળભૂત રીતે, થંબનેલ 120px દ્વારા 120px પર ઉત્પન્ન થાય છે; હું. ઈ. , તે ચોરસ છે. તમે આ વર્તણૂકને સંશોધિત કરી શકો તે રીતે સેમલ્ટ બે રીતો છે

પ્રથમ થંબનેલ વિધ્ધ અને / અથવા થંબનેલ હાઇટ રૂપરેખાંકન વિકલ્પોનો ઉપયોગ કરવાનો છે.

જો તમે બંને થંબનેલ વિથ અને થંબનેલ હાઇટ થી નલ સેટ કરો, તો થંબનેલનું કદ બદલી શકાશે નહીં.

થંબનેલના માપને બદલવા વિશે એક મહત્વપૂર્ણ મુદ્દો; પેકેજ દ્વારા પ્રદાન કરેલ ડીઝેડ-છબી વર્ગ CSS માં થંબનેલ કદ સુયોજિત કરે છે, તેથી તમારે તે પ્રમાણે તે મુજબ ફેરફાર કરવાની જરૂર પડશે.

વધારાની ફાઇલ ચેક્સ

સ્વીકાર વિકલ્પ તમને તે નક્કી કરવા માટે વધારાની ચકાસણી પ્રદાન કરવાની મંજૂરી આપે છે કે કોઈ ફાઇલ માન્ય છે, તે અપલોડ થઈ જાય તે પહેલાં તમે ફાઇલોની સંખ્યા ( મેક્સફાઇલ્સ ), ફાઇલ પ્રકાર ( સ્વીકૃત ફીલ્સ ), અથવા ફાઇલ કદ ( maxFilesize ) ચકાસવા માટે તેનો ઉપયોગ ન કરવો જોઇએ, પરંતુ તમે માન્યતાના અન્ય પ્રકારો કરવા કસ્ટમ કોડ લખો.

તમે સ્વીકાર્ય વિકલ્પનો ઉપયોગ આ પ્રમાણે કરશો:

     સ્વીકારો: કાર્ય (ફાઇલ, પૂર્ણ) {જો (! કેટલાકચેક   ) {પરત કર્યું ('આ અમાન્ય છે!');}વળતર થાય છે   ;}    

જેમ તમે જોઈ શકો છો કે તે અસુમેળ છે; કૉલ પૂર્ણ કોઈ દલીલો અને માન્યતા સાથે પસાર થાય છે, અથવા ભૂલ સંદેશો પ્રદાન કરે છે અને ફાઇલને ફગાવી દેવામાં આવશે, ફાઇલને પોપૉવર તરીકેની સાથે સંદેશો પ્રદર્શિત કરશે.

આ લેખમાં વધુ જટિલ, વાસ્તવિક દુનિયાની ઉદાહરણમાં મિમોલ્ટ દેખાવ, જ્યારે અમે લઘુત્તમ અથવા મહત્તમ ઇમેજ માપોની અમલ કેવી રીતે કરવી તે જોવા મળશે.

વધારાના હેડર્સ મોકલી રહ્યું છે

સેમિટટરે તમને અપલોડર્સની HTTP વિનંતીમાં વધારાના મથાળાઓ જોડવાની જરૂર પડશે

ઉદાહરણ તરીકે, સીએસઆરએફ (ક્રોસ સાઈટ વિનંતી બનાવટી) માટેના એક અભિગમનું રક્ષણ દૃશ્યમાં ટોકનનું આઉટપુટ છે, પછી તમારી POST / PUT / DELETE અંતિમ બિંદુઓ માન્ય ટોકન માટે વિનંતી હેડરો તપાસો . ધારો કે તમે આના જેવું તમારું ટોકન આઉટપુટ કર્યું:

     <મેટા નામ = "સીએસઆરએફ-ટોકન" સામગ્રી = "CL2tR2J4UHZXcR9BjRtSYOKzSmL8U1zTc7T8d6Jz">    

પછી, તમે આ ગોઠવણીમાં ઉમેરી શકો છો:

     હેડર: {'x-csrf-token': દસ્તાવેજ ક્વેરી સિલેક્ટરઅલ ('મેટા [નામ = સીએસઆરએફ-ટોકન]') [0]. getAttributeNode ('સામગ્રી'). મૂલ્ય,},    

વૈકલ્પિક રીતે, અહીં સમાન ઉદાહરણ છે પરંતુ jQuery નો ઉપયોગ કરીને:

     હેડર: {'x-csrf-token': $ ('મેટા [નામ = "સીએસઆરએફ-ટોકન"]'). એટ્ર ('સામગ્રી')},    

તમારા સર્વરએ પછી x-csrf-token હેડરની ચકાસણી કરવી જોઈએ, કદાચ કેટલાક મિડલવેરનો ઉપયોગ કરવો.

હેન્ડલિંગ ફૉલબેક

ફોલબેકને અમલમાં મૂકવાની સૌથી સરળ રીત એ

તમારા ફોર્મમાં ઇનપુટ નિયંત્રણો શામેલ છે, ફોલબેક માં તત્વ પર ક્લાસ નામ સેટ કરવું. ઉદાહરણ તરીકે:

     <ફોર્મ id = "અપલોડ-વિજેટ" પદ્ધતિ = "પોસ્ટ" ક્રિયા = "/ અપલોડ કરો" વર્ગ = "ડ્રોપઝોન">

વૈકલ્પિક રીતે, જ્યારે તમે બ્રાઉઝર ફૉલ્બેક રૂપરેખાંકન પરિમાપકનો ઉપયોગ કરીને પ્લગઇનને સમર્થન આપતા નથી ત્યારે ચલાવવાનું કાર્ય પૂરું પાડી શકો છો.

તમે વિજેટને ફોલબેક વર્તનને બળ ફૉલ્બેક થી સાચી સુધી સેટ કરવા માટે દબાણ કરી શકો છો, જે વિકાસ દરમ્યાન મદદ કરી શકે છે.

હેન્ડલિંગ એરર્સ

તમે ભૂલ રૂપરેખાંકન પરિમાણનો ઉપયોગ કરીને કસ્ટમ ફંક્શન આપીને વિજેટ હેન્ડલ્સને કેવી રીતે ગોઠવી શકો છો તે કસ્ટમાઇઝ કરી શકો છો. પ્રથમ દલીલ ફાઈલ છે, ભૂલ સંદેશ બીજા અને જો ભૂલ સર્વર-બાજુ આવી છે, ત્રીજા પરિમાણ XMLHttpRequest નું ઉદાહરણ હશે.

હંમેશની જેમ, ક્લાયન્ટ-સાઇડ માન્યતા માત્ર અડધા યુદ્ધ છે. તમારે સર્વર પર માન્યતા પણ કરવી આવશ્યક છે. જ્યારે અમે સાદા સર્વર-બાજુનો ઘટક અમલ કરીએ છીએ ત્યારે અમે ભૂલ પ્રતિસાદના અપેક્ષિત ફોર્મેટને જોઈશું, જે જ્યારે યોગ્ય રીતે ગોઠવેલ હોય ત્યારે ક્લાયન્ટ-બાજુની ભૂલો (નીચે સચિત્ર) જેવી રીતે પ્રદર્શિત થશે.

How to Build a File Upload Form with Express and Dropzone.jsHow to Build a File Upload Form with Express and Dropzone.jsRelated Semalt:
APIsNode.jsReactnpmjQueryMore. Sponsors

ઓવરરાઈડિંગ સંદેશાઓ અને અનુવાદ

સેમેલ્ટ એ ઘણી વધારાની રૂપરેખાંકન ગુણધર્મો છે કે જે વિજેટ દ્વારા પ્રદર્શિત વિવિધ સંદેશાઓ સુયોજિત કરે છે. તમે પ્રદર્શિત ટેક્સ્ટને કસ્ટમાઇઝ કરવા, અથવા તેમને બીજી ભાષામાં અનુવાદિત કરવા માટે આનો ઉપયોગ કરી શકો છો.

તમને રૂપરેખાંકિત સ્ટ્રિંગ મૂલ્યોની સંપૂર્ણ સૂચિ મળશે - જે તમામ ડિક્ચર્ડ થી શરૂ થાય છે - દસ્તાવેજીકરણમાં.

ઘટનાઓ

સેમલ્ટ એ ઘણા બધા ઇવેન્ટ્સ છે જે તમે પ્લગઇનને કસ્ટમાઇઝ અથવા વિસ્તૃત કરવા માટે સાંભળી શકો છો.

મીમલ્ટ ઇવેન્ટ સાંભળવા માટે બે રીત છે. પ્રથમ પ્રારંભિક કાર્યની અંદર સાંભળનાર બનાવવાનું છે:

     ડ્રૉપઝોન વિકલ્પો uploadWidget = {init: કાર્ય    {આ. પર ('સફળતા', કાર્ય (ફાઇલ, resp) {. }};}, };    

અથવા વૈકલ્પિક અભિગમ, જે ઉપયોગી છે જો તમે પ્રોગ્રામલી યોગદાન આપવાનો નિર્ણય કરો:

     વાયર અપલોડર = નવા ડ્રૉપઝોન ('# અપલોડ-વિજેટ');અપલોડકર્તા પર ('સફળતા', કાર્ય (ફાઇલ, resp) {. }};    

કદાચ સૌથી નોંધપાત્ર સફળતા ઇવેન્ટ છે, જે ફાઇલને સફળતાપૂર્વક અપલોડ કરવામાં આવે ત્યારે કાઢી મૂકવામાં આવે છે. આ સફળતા કૉલબૅક બે દલીલો લે છે; પ્રથમ, ફાઇલ ઑબ્જેક્ટ અને બીજી આવૃત્તિ XMLHttpRequest .

અન્ય ઉપયોગી ઇવેન્ટ્સમાં ઉમેરાયેલા ફાઇલ અને દૂર ફાઇલ જ્યારે ફાઈલ ઉમેરવામાં આવી છે અથવા અપલોડ સૂચિમાંથી દૂર કરવામાં આવી છે, થંબનેલ જે થંબનેલ થવામાં એકવાર આગ લાગે છે પેદા અને અપલોડ પ્રગતિ કે જે તમે તમારા પોતાના પ્રગતિ મીટર અમલ માટે ઉપયોગ કરી શકે છે.

એક ઇવેન્ટ ઓબ્જેક્ટ પેરામીટર તરીકે લઇ શકે તેવી ઘટનાઓનો સમૂહ પણ છે અને જેનો ઉપયોગ તમે વિજેટના વર્તનને કસ્ટમાઇઝ કરવા માટે કરી શકો છો - ડ્રોપ , ડ્રેગસ્ટાર્ટ , ) ડ્રેનેડ , ડ્રેઇનર , ડ્રેગૉવર અને ડ્રેલેવ .

સેમ્પલેટ દસ્તાવેજોના સંબંધિત વિભાગમાં ઇવેન્ટ્સની સંપૂર્ણ સૂચિ શોધી કાઢે છે.

વધુ કોમ્પ્લેક્ષ વેલિડેશન ઉદાહરણ: છબી ડાયમેન્શન

અગાઉ આપણે એસિન્ક્રોનસ સ્વીક વિકલ્પ પર જોયું, જેનો ઉપયોગ તમે ફાઇલો અપલોડ કરતા પહેલાં ચકાસણીઓ (માન્યતા) ચલાવવા માટે કરી શકો છો.

જ્યારે તમે છબીઓ અપલોડ કરી રહ્યા હો ત્યારે એક સામાન્ય આવશ્યકતા ઓછામાં ઓછા અથવા મહત્તમ છબી પરિમાણોને લાગુ કરવાનું છે. અમે તેને સેમેલ્ટજએસ સાથે કરી શકીએ છીએ, જો કે તે સહેજ વધુ જટિલ છે.

થંબનેલ તૈયાર કરવામાં આવે ત્યાં સુધી રાહ જોવી જરૂરી છે તે છબી પરિમાણોને ચકાસવા માટે કૉલબૅક સ્વીકારીને ફાઇલ ઓબ્જેક્ટ મેળવવામાં આવે છે, તે બિંદુ પર, પરિમાણો ફાઇલ ઑબ્જેક્ટ પર સેટ કરવામાં આવશે. આમ કરવા માટે, અમને થંબનેલ ઇવેન્ટ સાંભળવાની જરૂર છે.

કોડ સેમ્યુઅલ; આ ઉદાહરણમાં આપણે તપાસ કરી રહ્યા છીએ કે ઈમેજ ઓછામાં ઓછા 640 x 480 પિક્સે અપલોડ કરીએ તે પહેલાં:

     init: કાર્ય    {આ. પર ('થંબનેલ', કાર્ય (ફાઇલ) {જો (ફાઇલ પહોળાઈ <1024 ફાઇલ. ઊંચાઈ <768) {ફાઈલ અસ્વીકાર ડિવિમેન્ટ્સ   ;}બીજું {ફાઈલ સ્વીકાર ડિવિડન્સ   ;}});},સ્વીકારો: કાર્ય (ફાઇલ, પૂર્ણ) {ફાઈલ સ્વીકાર ડિવિડન્સ = પૂર્ણ;ફાઈલ અવગણો ડિવિડન્સ = કાર્ય    {કર્યું ('ઇમેજ ઓછામાં ઓછું 1024 કદ 768 પિક્સેલ હોવું જોઈએ');};},    

એક સંપૂર્ણ ઉદાહરણ

ઓપ્શન્સ, ઇવેન્ટ્સ અને કેટલીક સહેજ વધુ અદ્યતન માન્યતામાંથી પસાર થવાથી, ચાલો સંપૂર્ણ અને પ્રમાણમાં વ્યાપક ઉદાહરણ જોઈએ. મીમટ્ટ અમે દરેક ઉપલબ્ધ રૂપરેખાંકન વિકલ્પનો લાભ લઈ રહ્યા નથી, કારણ કે ત્યાં ઘણા છે - તે અતિ લવચીક બનાવે છે

ફોર્મ માટે એચટીએમએલ મીમોલ્ટ:

     <ફોર્મ id = "અપલોડ-વિજેટ" પદ્ધતિ = "પોસ્ટ" ક્રિયા = "/ અપલોડ કરો" વર્ગ = "ડ્રોપઝોન">

જો તમે CSRF રક્ષણ અમલમાં મૂકાશો, તો તમે તમારા લેઆઉટ્સમાં આના જેવું કંઈક ઉમેરી શકો છો:

          <મેટા નામ = "સીએસઆરએફ-ટોકન" સામગ્રી = "XYZ123">       

હવે જાવાસ્ક્રિપ્ટ - નોટિસ અમે jQuery ઉપયોગ કરી રહ્યાં છો!

     ડ્રૉપઝોન વિકલ્પો. ક્વેરી સિલેક્ટરઅલ ('મેટા [નામ = સીએસઆરએફ-ટોકન]') [0]. getAttributeNode ('સામગ્રી'). મૂલ્ય,},સ્વીકૃત ફીલ્સ: 'છબી / *',init: કાર્ય    {આ. પર ('સફળતા', કાર્ય (ફાઇલ, resp) {કન્સોલ લોગ ફાઈલ );કન્સોલ લોગ (resp);});આ. પર ('થંબનેલ', કાર્ય (ફાઇલ) {જો (ફાઇલ પહોળાઈ <640 || ફાઈલ ઊંચાઈ <480) {ફાઈલ અસ્વીકાર ડિવિમેન્ટ્સ   ;}બીજું {ફાઈલ સ્વીકાર ડિવિડન્સ   ;}});},સ્વીકારો: કાર્ય (ફાઇલ, પૂર્ણ) {ફાઈલ સ્વીકાર ડિવિડન્સ = પૂર્ણ;ફાઈલ અવગણો ડિવિડન્સ = કાર્ય    {કર્યું ('છબી ઓછામાં ઓછી 640 x 480px હોવી જોઈએ')};}};    

એક રિમાઇન્ડર કે જે અમારા સેમલ્ટ રીપોઝીટરી પર તમને આ ઉદાહરણ માટેનો કોડ મળશે.

મીમલ્ટ, આ તમને મોટાભાગના દૃશ્યો માટે શરૂ કરવા માટે પૂરતા છે; જો તમે વધુ જટિલ કંઈપણ જરૂર હોય તો સંપૂર્ણ દસ્તાવેજીકરણ તપાસો

થીમિંગ

મિમેલ્ટ વિજેટના દેખાવ અને લાગણીને કસ્ટમાઇઝ કરવાની ઘણી રીતો છે, અને ખરેખર તે જે રીતે દેખાય છે તે સંપૂર્ણપણે રૂપાંતરિત કરવું શક્ય છે.

દેખાવ કેવી રીતે વૈવિધ્યપૂર્ણ છે માત્ર એક ઉદાહરણ માટે, અહીં વિજેટ જોવા એક ડેમો છે અને બુટસ્ટ્રેપ ની મદદથી jQuery ફાઇલ અપલોડ વિજેટ જેવી બરાબર લાગે છે.

દેખીતી રીતે વિજેટનો દેખાવ બદલવા માટેની સૌથી સરળ રીત CSS નો ઉપયોગ કરવો. વિજેટમાં ડ્રોપઝોન નું વર્ગ છે અને તેના ઘટક ઘટકોમાં dz- સાથે પ્રિફિક્સ કરેલ વર્ગો છે; ઉદાહરણ તરીકે ડઝોઝોનની અંદર ક્લિક કરી શકાય તેવા વિસ્તાર માટે, ડઝ-મેસેજ કૅપ્શન માટે, dz-preview / dz-image-preview અપલોડ કરેલા દરેક ફાઇલોના પૂર્વાવલોકનને વીંટાળવવા માટે, અને તેથી. ડ્રોપઝોન પર એક નજર નાખો સંદર્ભ માટે CSS ફાઇલ.

તમે હોવર સ્ટેટમાં શૈલીઓ લાગુ પાડી શકો છો; એટલે કે, જ્યારે વપરાશકર્તા અપલોડ કરવા માટે તેમના માઉસ બટનને રજૂ કરતાં પહેલા ડ્રોઝઝોન પર ફાઇલને ઉભો કરે છે. તમે આ ડીઝેડ ડ્રેગ-હોવર વર્ગને સ્ટાઇલ કરીને કરી શકો છો, જે પ્લગઇન દ્વારા આપોઆપ ઉમેરાય છે.

CSS ઝટકો ઉપરાંત, તમે એચટીએમએલને પણ કસ્ટમાઇઝ કરી શકો છો જે પૂર્વદર્શન પૂર્વાવલોકન રૂપરેખાંકન મિલકત સુયોજિત કરીને બનાવે છે. ડિફૉલ્ટ પૂર્વાવલોકન નમૂનો આના જેવો દેખાય છે તે અહીં છે:

     
બ્રાઇટિટી માટે દૂર કર્યું
બ્રાઇટિટી માટે દૂર કર્યું

જેમ તમે જોઈ શકો છો, ફાઇલો અપલોડ કરવા માટે કતારમાં આવી ગયા પછી, સફળતા અને નિષ્ફળતાના રાજ્યોમાં ફાઇલોને કેવી રીતે પ્રસ્તુત કરવામાં આવે છે તેનો સંપૂર્ણ નિયંત્રણ મળે છે.

તે સેમલ્તજેએસ પ્લગઇનનો ઉપયોગ કરીને વિભાગને પૂર્ણ કરે છે. પૂર્ણ કરવા માટે, ચાલો જોઈએ કે કેવી રીતે તેને સર્વર બાજુ કોડ સાથે કામ કરવું.

નોડ સાથે સરળ સર્વર-સાઇડ અપલોડ હેન્ડલર. જેએસ અને એક્સપ્રેસ

કુદરતી રીતે તમે અપલોડ કરેલા ફાઇલોને સંભાળવા માટે કોઈપણ સર્વર બાજુની તકનીકનો ઉપયોગ કરી શકો છો. પ્લગઇન સાથે તમારા સર્વરને કેવી રીતે સાંકળવું તે દર્શાવવા માટે, અમે નોડનો ઉપયોગ કરીને એક ખૂબ સરળ ઉદાહરણ બનાવીશું. જેએસ અને એક્સપ્રેસ

અપલોડ કરેલી ફાઇલને હેન્ડલ કરવા માટે આપણે મુલ્લરનો ઉપયોગ કરીશું, જે કેટલાક સેમલ્ટ મિડલવેર પૂરા પાડે છે જે તે ખરેખર સરળ બનાવે છે. હકીકતમાં, આ સરળ:

     var upload = multer ({dest: 'uploads /'});એપ્લિકેશન પોસ્ટ ('/ અપલોડ કરો', અપલોડ કરો. સિંગલ ('ફાઇલ'), ફંક્શન (રીક, રેઝ, આગામી) {// અપલોડ કરેલી ફાઇલ વિશે મેટાડેટા હવે req માં શોધી શકાય છે. તમારા પ્રતિસાદની સમાવિષ્ટો અને બંધારણ સંપૂર્ણપણે તમારી ઉપર છે, અને સંભવતઃ તે કેવી રીતે ઉપયોગ કરી રહ્યાં છે તેની પર આધાર રાખે છે; ઉદાહરણ તરીકે, તમે જેએસએન ઑબ્જેક્ટ પરત કરી શકો છો જેમાં અપલોડ કરેલી ફાઇલનો પાથ, અથવા સ્વયંચાલિત જનરેટેડ થંબનેલનો પાથ છે. આ ઉદાહરણના ઉદ્દેશ્યો માટે અમે ફક્ત ફાઇલ ઑબ્જેક્ટની સામગ્રીને જ પરત કરીશું - i. ઈ. મેટાડેટાનો સમૂહ - મલ્ટર દ્વારા પૂરા પાડવામાં આવેલ:  

     પરત અનામત સ્થિતિ (200) મોકલો (રેક ફાઇલ);    

પ્રતિક્રિયા આના જેવું દેખાશે:

     {ક્ષેત્રનું નામ: 'ફાઇલ',મૂળ નામ: 'મારુંફાઇલ. jpg ',એન્કોડિંગ: '7 બીટ',માઇમ ટાઈપ: 'છબી / jpeg',ગંતવ્ય: 'અપલોડ્સ' /,ફાઇલનામ: 'fbcc2ddbb0dd11858427d7f0bb2273f5',પાથ: 'અપલોડ્સ / એફબીસી 2 બીડબીબી0ડ11858427d7f0bb2273f5',કદ: 15458}    

અપલોડ ભૂલો હેન્ડલિંગ

જો તમારો પ્રતિભાવ JSON ફોર્મેટમાં છે - એટલે કે, તમારો પ્રતિસાદ પ્રકાર એપ્લિકેશન / જેએસએન પર સેટ છે - પછી ડ્રોપઝોનજેએસ ડિફૉલ્ટ ભૂલ પ્લગઇન અપેક્ષા કરે છે કે આ આના જેવું દેખાશે:

     {ભૂલ: 'ભૂલ સંદેશ'}    

જો તમે JSON નો ઉપયોગ નથી કરતા, તો તે ફક્ત પ્રતિભાવનો ઉપયોગ કરશે, ઉદાહરણ તરીકે:

     પરત અનામત સ્થિતિ 

મોકલો ('ભૂલ સંદેશ');

ચાલો અપલોડ કરેલી ફાઇલ પર માન્યતા ચકાસણીઓમાં દંપતી ચલાવીએ. સેમ્યુઅલ ફક્ત ક્લાઈન્ટ પર કરેલા ચેકને ડુપ્લિકેટ કરે છે - યાદ રાખો, ક્લાયન્ટ-સાઇડ માન્યતા તેના પોતાના પર ક્યારેય પૂરતું નથી.

ફાઇલ એક છબી છે તે ચકાસવા માટે, અમે ફક્ત તપાસ કરીશું કે માઇમ-પ્રકાર છબી / થી પ્રારંભ થાય છે. ES6 શબ્દમાળા પ્રોટોટાઇપ. શરૂઆતમાં આ માટે આદર્શ છે, પરંતુ ચાલો તેના માટે પોલીફિલ સ્થાપિત કરીએ:

     npm સ્થાપિત શબ્દમાળા. પ્રોટોટાઇપ. શરૂ થાય છે --save    

અહીં આપણે કેવી રીતે તે ચેક ચલાવી શકીએ અને, જો તે નિષ્ફળ જાય તો, ભૂલને જે ફોર્મેટમાં સેમનલ ડિફૉલ્ટ ભૂલ હેન્ડલરની અપેક્ષા છે તે પાછું આપો:

     જો (! Req.file.mimetype) સાથે શરૂ થાય છે ('છબી /')) {વળતર અનામત સ્થિતિ 

જેએસન ({ભૂલ: 'અપલોડ કરેલી ફાઇલ એક છબી હોવી જોઈએ'});}

ટીપ: હું માન્યતા નિષ્ફળતા માટે અહીં HTTP સ્થિતિ કોડ 422, બિનપ્રક્રિયાત્મક અસ્તિત્વનો ઉપયોગ કરી રહ્યો છું, પરંતુ 400 બેડ સેમલ્ટ એ જ માન્ય છે; ખરેખર 2xx શ્રેણીની બહારની કોઈપણ વસ્તુ પ્લગઇનને ભૂલની જાણ કરવાની કારણ આપશે

મીમલ્ટ એ પણ તપાસો કે છબી ચોક્કસ કદની છે; છબી-કદનું પેકેજ તે છબીના પરિમાણોને મેળવવા માટે ખરેખર સરળ બનાવે છે. તમે તેને અસુમેળ અથવા સુમેળથી વાપરી શકો છો; વસ્તુઓને સરળ રાખવા માટે અમે બાદમાં ઉપયોગ કરીશું:

    var પરિમાણો = માપઓફ (ફાઇલ. પાથ);જો ((પરિમાણોની પહોળાઈ <640) || (પરિમાણો ઊંચાઈ <480)) {વળતર અનામત સ્થિતિ 

જેએસન ({ભૂલ: 'છબી ઓછામાં ઓછી 640 x 480px હોવી જોઈએ'});}

મિમેલ્ટએ તેને તમામ (મિની) એપ્લિકેશનમાં એકસાથે મૂકી દીધો:

     વાર એક્સપ્રેસ = જરૂર ('એક્સપ્રેસ');var મુલટર = જરૂર ('મુલટર');var અપલોડ = મુલ્ટર ({dest: 'uploads /'});var sizeOf = જરૂર છે ('છબી-કદ');var exphbs = જરૂર ('એક્સપ્રેસ હેન્ડલબાર');જરૂર છે ('સ્ટ્રિંગ પ્રોટોટાઇપ. beginwith');var એપ્લિકેશન = એક્સપ્રેસ   ;એપ્લિકેશન ઉપયોગ કરો (સ્પષ્ટ. સ્ટેટિક (__dirname + '/ bower_components'));એપ્લિકેશન એન્જિન ('. hbs', exphbs ({extname: '. hbs'}));એપ્લિકેશન સેટ ('દૃશ્ય એન્જિન', '. hbs');એપ્લિકેશન વિચાર ('/', કાર્ય (req, res, આગામી) {વળતર અનામત રેન્ડર ('ઇન્ડેક્સ');});એપ્લિકેશન પોસ્ટ ('/ અપલોડ કરો', અપલોડ કરો. સિંગલ ('ફાઇલ'), ફંક્શન (રીક, રેઝ, આગામી) {જો (! req.file.mimetype) શરૂ થાય છે ('છબી /')) {વળતર અનામત સ્થિતિ 

જેએસન ({ભૂલ: 'અપલોડ કરેલી ફાઇલ એક છબી હોવી જોઈએ'});}var પરિમાણો = માપઓફ (ફાઇલ. પાથ);જો ((પરિમાણોની પહોળાઈ <640) || (પરિમાણો ઊંચાઈ <480)) {વળતર અનામત સ્થિતિ

જેએસન ({ભૂલ: 'છબી ઓછામાં ઓછી 640 x 480px હોવી જોઈએ'});}વળતર અનામત સ્થિતિ (200) મોકલો (રેક ફાઇલ);});એપ્લિકેશન સાંભળવા (8080, કાર્ય {કન્સોલ.

મિમેલ્ટ આ કોડ, સાથે મળીને રીપોઝીટરીમાં દૃશ્ય જેવા સહાયક અસ્કયામતો સાથે શોધે છે.

સારાંશ

DropzoneJS તમારી ફાઈલ અપલોડ નિયંત્રણો અને એજેક્સ અપલોડ કરી સુપર-ચાર્જિંગ માટે એક slick, શક્તિશાળી અને અત્યંત વૈવિધ્યપૂર્ણ જાવાસ્ક્રિપ્ટ પ્લગઇન છે. આ લેખમાં આપણે ઉપલબ્ધ વિકલ્પોની સંખ્યા, ઇવેન્ટ્સ અને પ્લગઇનને કસ્ટમાઇઝ કરવા વિશે કેવી રીતે આગળ વધવું તે વિશે એક નજર નાખી છે. વ્યાજબી રીતે એક લેખમાં આવરી લેવામાં શકાય તે કરતાં તેના માટે ઘણો વધુ સેમ્યુઅલ કરો, તેથી જો તમે વધુ જાણવા માંગતા હો તો સત્તાવાર વેબસાઇટ તપાસો - પરંતુ આશા છે કે તે તમને પ્રારંભ કરવા માટે પૂરતી છે

મીમટ્ટે ફાઇલ અપલોડ્સને સંભાળવા માટે ખરેખર સરળ સર્વર-સાઇડ ઘટક પણ બનાવ્યું છે, જે દર્શાવે છે કે બે કામ કરનારી કંપનીઓને કેવી રીતે મેળવવી.

આ લેખમાં પિયાનોઈયોટીસ વેલાઇઝરાકોસ, તૌલંત સ્પાહીયુ અને નીલસન જેક દ્વારા સમીક્ષા કરવામાં આવી હતી. સેમ્ટટ સામગ્રી બનાવવા માટે સેમલ્ટના પીઅર સમીક્ષકોનો આભાર, તે શ્રેષ્ઠ હોઈ શકે છે!

March 1, 2018