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

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

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

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

מתוזמן נעוץ נעול הועבר תכנות
33 פוסטים 4 כותבים 2.1k צפיות
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • 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
                                    • א מנותק
                                      א מנותק
                                      אהרן
                                      השיב לdovid ב נערך לאחרונה על ידי אהרן
                                      #24
                                      				<textarea drop-zone upload-data="vm.uploadData" ng-model="vm.uploadData.text"
                                      				class="one"
                                      				placeholder="גררו לכאן את הקובץ הרצוי,&#10או הדביקו כאן את הטקסט"
                                      				/>
                                      
                                      				<button ng-click="vm.createNewProject()" >
                                      					צור פרויקט
                                      					<span ng-if="vm.uploadData.projectName">"{{vm.uploadData.projectName}}"</span>
                                      				</button>
                                      
                                          .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];
                                      					
                                      					if (file.name.indexOf('.txt') != -1)
                                      						scope.uploadData.type = 'txt';
                                      					if (file.name.indexOf('.docx') != -1)
                                      						scope.uploadData.type = 'docx';
                                      						
                                      					if( !scope.uploadData.type )
                                      						return alert('לא קובץ docx / txt');
                                      						
                                      					if( scope.uploadData.text )
                                      						return alert('יש כבר טקסט')
                                      
                                      						
                                      					scope.uploadData.fileObj = file;
                                      				});
                                      				
                                      				element.bind("dragover", function (e) {
                                      					e.stopPropagation();
                                      					e.preventDefault();
                                      					e.dataTransfer.dropEffect = 'copy';
                                      					//console.log('dragover')
                                      					//console.log(e)
                                      				});
                                      			}
                                      		};
                                      	}]);
                                      
                                      
                                      	function createNewProject () {
                                      			
                                      		if( vm.uploadData.text )
                                      			vm.uploadData.type = 'text'
                                      			
                                      		if( !vm.uploadData.type )
                                      			return alert('אין תוכן לפרק')
                                      
                                      		if( !vm.uploadData.projectName )
                                      			return alert('אנא הגדר את שם הפרויקט')
                                      			
                                      		let upData = false;
                                      		upData = new FormData();
                                      		upData.append('file', vm.uploadData.fileObj);
                                      		upData.append('file2', 'ddd');
                                      		console.log(upData)
                                      		console.log(vm.uploadData.fileObj)
                                      		for(let t of upData) {console.log(t)}
                                      
                                      		$http({
                                      			method: 'POST',
                                      			url: 'tchumim/ajax/createNewProject',
                                      			data: upData,
                                      			/*headers: { 'Content-Type': undefined}
                                      			headers: { 'Content-Type': 'application/json; charset=UTF-8' },*/
                                      		}).then( function( res ){
                                      		}, function(errRes){
                                      			serverError();
                                      		});
                                      	}
                                      })
                                      
                                      תגובה 1 תגובה אחרונה
                                      0
                                      • א מנותק
                                        א מנותק
                                        אהרן
                                        כתב ב נערך לאחרונה על ידי
                                        #25

                                        צד שרת

                                            const express = require('express');
                                            const app = express();
                                            let multer  = require('multer')
                                            let upload = multer({ dest: 'uploads/' })
                                        
                                            app.post('/tchumim/ajax/createNewProject', upload.single('file'), createNewProject);
                                            
                                            function createNewProject( req , res ) {
                                            'use strict';
                                            console.log('createNewProject')
                                                
                                                let body = req.body;
                                                console.dir( body )
                                                console.dir( req.file )
                                        
                                        
                                        תגובה 1 תגובה אחרונה
                                        0
                                        • dovidD מחובר
                                          dovidD מחובר
                                          dovid ניהול
                                          כתב ב נערך לאחרונה על ידי
                                          #26

                                          הקוד (צד שרת) פולט שגיאה כל שהיא? לפי התיעוד שלהם זה אמור לעבוד לך.
                                          העובדה שכתבת { dest: 'uploads/' } גורמת לnulter להניח שישנה כזו תיקיה ולנסות לשמור שם את הקובץ פיזית. ייתכן שאן אין תיקיה הוא יוצר אותה, ייתכן שהוא מתעלם וגם... ייתכן

                                          (נ.ב. הקוד שלך לא הכי נעים לקריאה. ההזחות, ונקודה פסיק לא עקביים. ומה הסיבה שאתה תוקע את 'use strict' באמצע פונקציות? אתה לא משתמש בIDE כל שהוא?).

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

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

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

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