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

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

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

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

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

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

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

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

    א מנותק
    א מנותק
    אהרן
    כתב ב נערך לאחרונה על ידי אהרן
    #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
        • dovidD dovid

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

          א מנותק
          א מנותק
          אהרן
          כתב ב נערך לאחרונה על ידי
          #11

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

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

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

          dovidD תגובה 1 תגובה אחרונה
          0
          • א אהרן

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

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

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

            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
                • dovidD dovid

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

                  א מנותק
                  א מנותק
                  אהרן
                  כתב ב נערך לאחרונה על ידי אהרן
                  #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
                    • dovidD dovid

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

                      א מנותק
                      א מנותק
                      אהרן
                      כתב ב נערך לאחרונה על ידי אהרן
                      #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
                              • dovidD dovid

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

                                א מנותק
                                א מנותק
                                אהרן
                                כתב ב נערך לאחרונה על ידי
                                #22

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

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

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

                                dovidD תגובה 1 תגובה אחרונה
                                0
                                • א אהרן

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

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

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

                                  dovidD מנותק
                                  dovidD מנותק
                                  dovid
                                  ניהול
                                  כתב ב נערך לאחרונה על ידי
                                  #23

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

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

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

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

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

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

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

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

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

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

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

                                    א מנותק
                                    א מנותק
                                    אהרן
                                    כתב ב נערך לאחרונה על ידי אהרן
                                    #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
                                        • dovidD dovid

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

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

                                          א מנותק
                                          א מנותק
                                          אהרן
                                          כתב ב נערך לאחרונה על ידי אהרן
                                          #27

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

                                          הקוד (צד שרת) פולט שגיאה כל שהיא? לפי התיעוד שלהם זה אמור לעבוד לך.

                                          שום שגיאה
                                          הפלט
                                          createNewProject
                                          undefined
                                          undefined

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

                                          (נ.ב. הקוד שלך לא הכי נעים לקריאה

                                          ראית פה מישהו שמרט את שערות ראשו ונשאר יפה? 🙂
                                          בקשר להזחות, אולי בגלל שזה חלקים מפונציות אחרות?
                                          ובנוגע לנקודה פסיק, דווקא אני מנסה להקפיד ע"ז, חוץ מבקונסול שם אני לא שם, שתהיה לי התראה ואמחוק.

                                          תגובה 1 תגובה אחרונה
                                          0
                                          תגובה
                                          • תגובה כנושא
                                          התחברו כדי לפרסם תגובה
                                          • מהישן לחדש
                                          • מהחדש לישן
                                          • הכי הרבה הצבעות


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

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

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