דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תכנות
  3. פתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?

פתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?

מתוזמן נעוץ נעול הועבר תכנות
33 פוסטים 4 כותבים 2.1k צפיות
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • dovidD מחובר
    dovidD מחובר
    dovid ניהול
    כתב ב נערך לאחרונה על ידי
    #4

    תקרא את המאמר הזה: https://www.html5rocks.com/en/tutorials/file/dndfiles/
    בסבלנות שלב אחרי שלב. אם יש שאלה ספציפית שאל.

    • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
    • בכל נושא אפשר ליצור קשר dovid@tchumim.com
    א 2 תגובות תגובה אחרונה
    2
    • א מנותק
      א מנותק
      אהרן
      השיב לdovid ב נערך לאחרונה על ידי אהרן
      #5

      @dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

      תקרא את המאמר הזה: https://www.html5rocks.com/en/tutorials/file/dndfiles/
      בסבלנות שלב אחרי שלב. אם יש שאלה ספציפית שאל.

      תודה רבה!
      למעשה עשיתי נכון, רק שבדקתי א"ז ע"י הדפסת האוונט לקונסול, ושם המאפיין פייל היה ריק
      רק אם אני שומר א"ז קודם
      var files = e.dataTransfer.files;
      המידע על הקובץ נשמר.

      אגב, ממש מסקרן מדוע אתר התמיכה של נטפרי משתמש במאפיין items בזמן שאצלי הוא תמיד ריק, איך זה בכלל עובד<

      תגובה 1 תגובה אחרונה
      0
      • א מנותק
        א מנותק
        אהרן
        השיב לdovid ב נערך לאחרונה על ידי
        #6

        @dovid
        לאיזה פורמט צריך לרנדר קובץ docx ?

        תגובה 1 תגובה אחרונה
        0
        • dovidD מחובר
          dovidD מחובר
          dovid ניהול
          כתב ב נערך לאחרונה על ידי
          #7

          @אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

          @dovid
          לאיזה פורמט צריך לרנדר קובץ docx ?

          מה הכונה צריך? מי צריך?

          • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
          • בכל נושא אפשר ליצור קשר dovid@tchumim.com
          א תגובה 1 תגובה אחרונה
          0
          • א מנותק
            א מנותק
            אהרן
            השיב לdovid ב נערך לאחרונה על ידי אהרן
            #8

            @dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

            מה הכונה צריך? מי צריך?

            בשביל להעלות את הקובץ לשרת.

            מהכתבה שהבאת הבנתי שאוביקט הfile מחזיק רק מידע על הקובץ, ובשביל לשלוח את הקובץ עצמו צריך לרנדר (=לקרוא) את אותו ואז אפשר לשלוח את תכולתו.

            אז הנחתי שצורת הרנדור יכולה להשפיע על תכולת הקובץ, ואם אבחר בצורה הלא נכונה, השרת לא יצליח לקרוא את הקובץ.

            הבנתי נכון?

            כך כתבתי את הקוד:

            <textarea drop-zone upload-data="vm.uploadData" ng-model="vm.uploadData.text"
            
            
                .directive('dropZone', ['$http', function($http){
                	return {
            		    scope: {
            		    	uploadData: '=',
            		    },
            		    link: function (scope, element, attrs) {
            	
            				element.bind("drop", function (e) {
            					e.stopPropagation();
            					e.preventDefault();
            					let file = e.dataTransfer.files[0];
            					scope.uploadData.fileObj = file;
            					
            					var reader = new FileReader();
            						//reader.onload = function( theFile ) {
            					reader.onloadend = function( theFile ) {
            						scope.uploadData.contentFile = reader.result;
            					}
                                                    reader.readAsBinaryString(file)
            					scope.$apply()
            				});
            				
            				element.bind("dragover", function (e) {
            					e.stopPropagation();
            					e.preventDefault();
            					e.dataTransfer.dropEffect = 'copy';
            				});
            			}
            		}
            	}]);
            
            

            האם הכתיבה והאנלוגיה נכונה?

            תגובה 1 תגובה אחרונה
            0
            • א מנותק
              א מנותק
              אהרן
              כתב ב נערך לאחרונה על ידי
              #9

              ואז אחרי שיש את תוכן הקובץ (ופרטים נוספים שמכניסים בשדות יעודיים), לוחצים על האינופוט "צור פרויקט), ששולח הכל לשרת.
              לאינפוט מוצמד ארוע קליק שיושב על הקונטרולר

              		function makeNewProject () {
              			$http({
              				method: 'POST',
              				url: 'serverUrl',
              				data: {
              					projectName: 'myProject',
              					data: vm.uploadData.contentFile,
              				}
              			}).then( function( res ){
              			}, function(errRes){
              				serverError();
              			});
              		}
              
              תגובה 1 תגובה אחרונה
              0
              • dovidD מחובר
                dovidD מחובר
                dovid ניהול
                כתב ב נערך לאחרונה על ידי
                #10

                לא, אתה טועה.
                בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

                • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                א תגובה 1 תגובה אחרונה
                0
                • א מנותק
                  א מנותק
                  אהרן
                  השיב לdovid ב נערך לאחרונה על ידי
                  #11

                  @dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                  לא, אתה טועה.
                  בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

                  אז איך שולחים
                  את אוביקט הקובץ?

                  dovidD תגובה 1 תגובה אחרונה
                  0
                  • dovidD מחובר
                    dovidD מחובר
                    dovid ניהול
                    השיב לאהרן ב נערך לאחרונה על ידי
                    #12

                    @אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                    @dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                    לא, אתה טועה.
                    בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

                    אז איך שולחים
                    את אוביקט הקובץ?

                    כן, בFormData אפשר לכלול את אובייקט הקובץ והדפדפן מעלה אותו כמו בform פשוט.

                    • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                    • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                    תגובה 1 תגובה אחרונה
                    2
                    • א מנותק
                      א מנותק
                      אהרן
                      כתב ב נערך לאחרונה על ידי
                      #13

                      משום מה, מגיע לשרת אוביקט ריק

                      				data = new FormData();
                      				data.append('file', vm.uploadData.fileObj);
                      				console.log(data)
                      			$http({
                      				method: 'POST',
                      				url: url,
                      				data: { data: data },
                      				headers: { 'Content-Type': undefined}
                      			}
                      

                      משהו פה לא נכון?

                      תגובה 1 תגובה אחרונה
                      0
                      • dovidD מחובר
                        dovidD מחובר
                        dovid ניהול
                        כתב ב נערך לאחרונה על ידי dovid
                        #14

                        תצרף גם מה שהודפס בconsole.log.
                        (אגב למה שמת 'Content-Type': undefined ?, אולי זה הבעיה?)

                        • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                        • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                        א תגובה 1 תגובה אחרונה
                        0
                        • א מנותק
                          א מנותק
                          אהרן
                          השיב לdovid ב נערך לאחרונה על ידי אהרן
                          #15

                          @dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                          (אגב למה שמת 'Content-Type': undefined ?, אולי זה הבעיה?)

                          לא, זה אחד הנסיונות לתקן את הבעיה.


                          זה הקוד בסרוור

                          app.post('/xxx/ajax/createNewProject', createNewProject);
                              
                              function createNewProject( req , res ) {
                              'use strict';
                              console.log('createNewProject')
                                  
                                  let body = req.body;
                                  console.log( body.data )
                                  console.dir( body )
                          

                          הלוג:

                          undefined
                          {}
                          
                          תגובה 1 תגובה אחרונה
                          0
                          • dovidD מחובר
                            dovidD מחובר
                            dovid ניהול
                            כתב ב נערך לאחרונה על ידי dovid
                            #16

                            בקוד שלך היה console.log(data)
                            ביקשתי את הפלט שלו.

                            • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                            • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                            א תגובה 1 תגובה אחרונה
                            0
                            • א מנותק
                              א מנותק
                              אהרן
                              השיב לdovid ב נערך לאחרונה על ידי אהרן
                              #17

                              @dovid

                              FormData {}__proto__: FormData
                              
                              תגובה 1 תגובה אחרונה
                              0
                              • א מנותק
                                א מנותק
                                אהרן
                                כתב ב נערך לאחרונה על ידי
                                #18

                                כשאני מדפיס console.log(vm.uploadData.fileObj) זה גם נראה בסדר

                                File(110866) {name: "חדשושן.docx", lastModified: 1520200202739, lastModifiedDate: Sun Mar 04 2018 23:50:02 GMT+0200 (שעון רגיל ירושלים), webkitRelativePath: "", size: 110866, …}
                                lastModified
                                :
                                1520200202739
                                lastModifiedDate
                                :
                                Sun Mar 04 2018 23:50:02 GMT+0200 (שעון רגיל ירושלים) {}
                                name
                                :
                                "חדשושן.docx"
                                size
                                :
                                110866
                                type
                                :
                                "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                webkitRelativePath
                                :
                                ""
                                __proto__
                                :
                                File
                                
                                תגובה 1 תגובה אחרונה
                                0
                                • א מנותק
                                  א מנותק
                                  אהרן
                                  כתב ב נערך לאחרונה על ידי
                                  #19

                                  עד עכשיו השתמשתי ב

                                  app.use(express.bodyParser());
                                  

                                  אבל עכשיו זה מחזיר שגיאה

                                  Error: invalid json
                                  

                                  אז החלפתי לזה:

                                  var bodyParser = require('body-parser');
                                  app.use(bodyParser.json());
                                  app.use(bodyParser.urlencoded({extended: true}));
                                  

                                  וגם פה קבלתי שגיאה

                                  PayloadTooLargeError: request entity too large
                                  

                                  אין לי כבר כח

                                  תגובה 1 תגובה אחרונה
                                  0
                                  • zvizviZ מנותק
                                    zvizviZ מנותק
                                    zvizvi
                                    כתב ב נערך לאחרונה על ידי
                                    #20

                                    @אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                                    request entity too large

                                    המלצה שלי להשתמש בmulter עבור העלאת קבצים.

                                    https://github.com/expressjs/multer

                                    https://zvizvi.xyz

                                    תגובה 1 תגובה אחרונה
                                    2
                                    • dovidD מחובר
                                      dovidD מחובר
                                      dovid ניהול
                                      כתב ב נערך לאחרונה על ידי dovid
                                      #21

                                      הconsole בצד הלקוח אמר את דברו. אם הFormData מקבל File תקין, אז "האשמה" מתגלגלת לפתחו של צד השרת. אכן, חיפוש בגוגל של expressjs receive input file מעלה שזה לא עובד בדרך הזו.
                                      נסה את המלצתו של @zvizvi.

                                      • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                                      • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                                      א תגובה 1 תגובה אחרונה
                                      1
                                      • א מנותק
                                        א מנותק
                                        אהרן
                                        השיב לdovid ב נערך לאחרונה על ידי
                                        #22

                                        @dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                                        נסה את המלצתו של @zvizvi.

                                        body מגיע אנדיפיינד
                                        אוף!!

                                        dovidD תגובה 1 תגובה אחרונה
                                        0
                                        • dovidD מחובר
                                          dovidD מחובר
                                          dovid ניהול
                                          השיב לאהרן ב נערך לאחרונה על ידי
                                          #23

                                          @אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                                          @dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

                                          נסה את המלצתו של @zvizvi.

                                          body מגיע אנדיפיינד
                                          אוף!!

                                          במקום אוף תביא קוד. ולמה אתה חושב שהכל מובן מאליו? רק במקרוסופט או אנגולר יש כזו אידליה. בפרימוורקים כמו אקספרס אתה חייב לקחת שליטה על כל דבר שזז.

                                          • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                                          • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                                          א clickoneC 2 תגובות תגובה אחרונה
                                          2

                                          • 1
                                          • 2
                                          בא תתחבר לדף היומי!
                                          • התחברות

                                          • אין לך חשבון עדיין? הרשמה

                                          • התחברו או הירשמו כדי לחפש.
                                          • פוסט ראשון
                                            פוסט אחרון
                                          0
                                          • דף הבית
                                          • קטגוריות
                                          • פוסטים אחרונים
                                          • משתמשים
                                          • חיפוש
                                          • חוקי הפורום